css,animation
时间: 2024-01-04 07:03:59 浏览: 54
CSS动画是一种用于创建动态变化的网页元素的技术。它可以通过使用@keyframes规则来定义动画的关键帧,然后使用animation属性将其应用于元素。以下是关于CSS动画和animation属性的一些信息:
1. CSS动画可以通过改变元素的属性值来创建动画效果,例如位置、大小、颜色等。
2. @keyframes规则用于定义动画的关键帧,即动画在不同时间点的状态。
3. animation属性用于将动画应用于元素,并指定动画的名称、持续时间、重复次数、方向等属性。
4. 可以使用animation-timing-function属性来指定动画的时间函数,例如线性、缓入缓出等。
5. 可以使用animation-delay属性来指定动画的延迟时间。
6. 可以使用animation-fill-mode属性来指定动画在播放前和播放后的状态。
以下是一个CSS动画的例子,它将一个正方形元素从左上角移动到右下角并改变颜色:
```css
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
animation-duration: 5s;
animation-iteration-count: 1;
animation-direction: normal;
}
@keyframes mymove {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
```
animation属性的值可以简写为:
```css
animation: mymove 5s 1 normal;
```
除了@keyframes规则外,还可以使用animation属性的值来定义动画的关键帧。例如,以下是一个将圆形元素从50x50变为100x100再变回50x50的动画:
```css
div {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
animation-name: mymove;
animation-duration: 2s;
}
@keyframes mymove {
0% {width: 50px; height: 50px;}
50% {width: 100px; height: 100px;}
100% {width: 50px; height: 50px;}
}
```