【CSS3教程】之animation css3动画
什么是 CSS 动画？
动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
CSS 动画属性
下表列出了 @keyframes 规则和所有 CSS 动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画模式。 |
| animation | 设置所有动画属性的简写属性。 |
| animation-delay | 规定动画开始的延迟。 |
| animation-direction | 定动画是向前播放、向后播放还是交替播放。 |
| animation-duration | 规定动画完成一个周期应花费的时间。 |
| animation-fill-mode | 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 |
| animation-iteration-count | 规定动画应播放的次数。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-play-state | 规定动画是运行还是暂停。 |
| animation-timing-function | 规定动画的速度曲线。 |
动画简写属性
下例使用六种动画属性：
实例
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
亲自试一试
使用简写的 animation 属性也可以实现与上例相同的动画效果：
实例
div {
animation: example 5s linear 2s infinite alternate;
}
联系客服