| 属性 |
描述 |
| @keyframes |
定义动画 |
| animation |
执行动画 |
| animation-name |
动画名称 |
| animation-duration |
执行完这个动画所需要花费的时间 单位是秒数 |
| animation-timing-function |
动画执行过程中的变化速度
| linear |
动画从头到尾的速度是
相同的。 |
测试 |
| ease |
默认。动画以低速
开始，然后加快，
在结束前变慢。 |
测试 |
| ease-in |
动画以低速开始。 |
测试 |
| ease-out |
动画以低速结束。 |
测试 |
| ease-in-out |
动画以低速开始
和结束。 |
测试 |
|
| animation-delay |
延迟多久后执行动画 单位是秒数 ,只生效一次 |
| animation-iteration-count |
执行多少次动画 n（1,2,3,4…） infinite无穷，循环 |
| animation-direction |
动画下次的执行方向 |
| animation-play-state |
动画是否执行 |
| animation-fill-mode |
| 执行完动画的状态 |
| 值 |
描述 |
| none |
不改变默认行为。 |
| forwards |
当动画完成后，保持最后一个属性值
（在最后一个关键帧中定义）。 |
| backwards |
在 animation-delay 所指定的一段时间
内，在动画显示之前，应用开始属性值（在
第一个关键帧中定义）。 |
| both |
向前和向后填充模式都被应用。 |
|
语法①：两种状态，from代表初始状态，to代表最终转态
@keyframes 动画名称{
from{
}
to{
}
}
语法②：按百分比（0-100%）分割
@keyframes 动画名称{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
例子：
<style type="text/css">
/*动画实现风车旋转效果*/
img{
/*
animation-name:scroll;动画名称
animation-duration:1s;执行完这个动画所需要花费的时间 单位是秒数
animation-timing-function:linear;动画执行过程中的变化速度
animation-delay:0s; 延迟多久后执行动画,只生效一次
animation-iteration-count:infinite; 执行多少次动画
animation-direction:normal; 动画下次的执行方向
animation-fill-mode:forwards; 执行完动画的状态
*/
animation:scroll 1s linear 0s infinite normal running forwards;
}
img:hover{
animation-play-state:paused; /*动画是否执行*/
}
@keyframes scroll{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
<body>
<img src='images/fengche.png'/>
</body>