📅 最后修改于: 2020-11-05 02:02:16 🧑 作者: Mango
CSS Animation属性用于在网页上创建动画。它可以替代Flash和JavaScript创建的动画。
动画是在@keyframe规则中创建的。它用于控制CSS动画序列中的中间步骤。
动画使元素逐渐从一种样式变为另一种样式。您可以添加要添加的属性。您还可以指定百分比的更改。0％指定动画的开始，而100％指定动画的完成。
在@keyframe规则中创建动画时，它必须与选择器绑定；否则动画将无效。
可以通过至少指定以下两个属性将动画绑定到选择器：
| Property | Description |
|---|---|
| @keyframes | It is used to specify the animation. |
| animation | This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property. |
| animation-delay | It specifies when the animation will start. |
| animation-direction | It specifies if or not the animation should play in reserve on alternate cycle. |
| animation-duration | It specifies the time duration taken by the animation to complete one cycle. |
| animation-fill-mode | it specifies the static style of the element. (when the animation is not playing) |
| animation-iteration-count | It specifies the number of times the animation should be played. |
| animation-play-state | It specifies if the animation is running or paused. |
| animation-name | It specifies the name of @keyframes animation. |
| animation-timing-function | It specifies the speed curve of the animation. |
让我们看一个简单的CSS动画示例，该示例将矩形的背景颜色从RED更改为BLACK。
Note: The IE 9 and earlier versions don't support CSS3 animation property.
让我们再举一个例子来显示带有百分比值的动画。
Note: The Internet Explorer 9 and its earlier versions don't support this example.