| 属性 | 描述 | |||||||||||||||
| @keyframes | 定义动画 | |||||||||||||||
| animation | 执行动画 | |||||||||||||||
| animation-name | 动画名称 | |||||||||||||||
| animation-duration | 执行完这个动画所需要花费的时间 单位是秒数 | |||||||||||||||
| animation-timing-function | 动画执行过程中的变化速度
|
|||||||||||||||
| animation-delay | 延迟多久后执行动画 单位是秒数 ,只生效一次 | |||||||||||||||
| animation-iteration-count | 执行多少次动画 n（1,2,3,4…） infinite无穷，循环 | |||||||||||||||
| animation-direction | 动画下次的执行方向 | |||||||||||||||
| animation-play-state | 动画是否执行 | |||||||||||||||
| animation-fill-mode |
|
|||||||||||||||
语法①：两种状态，from代表初始状态，to代表最终转态
@keyframes 动画名称{
from{
}
to{
}
}
@keyframes 动画名称{
from{
}
to{
}
}
@keyframes 动画名称{
from{
}
to{
}
}
语法②：按百分比（0-100%）分割
@keyframes 动画名称{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
@keyframes 动画名称{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
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>
<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>
<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>