1.动画的定义
<style>
/*只定义起始与结束*/
@keyframes 动画名称1 {
from { }
to { }
}
/*用百分比定义动画*/
@keyframes 动画名称2 {
0% { }
10% { }
100% { }
}
</style>
2.使用动画
/*动画名称 持续5秒 无限重复或定义次数(2)*/ animation: 动画名称 5s infinite;
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画模式。 |
| animation | 设置所有动画属性的简写属性。 |
| animation-delay | 规定动画开始的延迟。 |
| animation-direction | 定动画是向前播放、向后播放还是交替播放。 |
| animation-duration | 规定动画完成一个周期应花费的时间。 |
| animation-fill-mode | 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 |
| animation-iteration-count | 规定动画应播放的次数。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-play-state | 规定动画是运行还是暂停。 |
| animation-timing-function | 规定动画的速度曲线。 |