动画使元素逐渐从一种样式变为另一种样式，它可以随意更改任意数量的css的属性。

提示：以下是本篇文章正文内容，下面案例可供参考

如果在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。 要使动画生效，必须将动画绑定到某个元素。 例：下面的例子将 “example” 动画绑定到 < div > 元素。动画将持续 4 秒钟，同时将 < div > 元素的背景颜色从 “red” 逐渐改为 “yellow”。

注意：animation-duration属性定义需要多长时间才能完成动画，若未指定这个属性，则动画不会发生，因为默认值为0（0S）

在以上例子中，通过使用关键字“from”和“to”（代表0%开始和100%完成），我们设置了样式何时改变。我们也可以设置为百分比形式。通过百分比，可以根据需要添加任意多个样式。 例：

animation-delay 属性规定动画开始的延迟时间。 下面的例子在开始动画前有 2 秒的延迟：

代码如下（示例）：

animation-iteration-count 属性指定动画应运行的次数。 下面的例子在停止前把动画运行 3 次：

代码如下（示例）：

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 animation-direction 属性可接受以下值： 1，normal - 动画正常播放（向前）。默认值 2，reverse - 动画以反方向播放（向后） 3，alternate - 动画先向前播放，然后向后 4，alternate-reverse - 动画先向后播放，然后向前 下例将以相反的方向（向后）运行动画：

animation-timing-function 属性规定动画的速度曲线。 animation-timing-function 属性可接受以下值： ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） linear - 规定从开始到结束的速度相同的动画 ease-in - 规定慢速开始的动画 ease-out - 规定慢速结束的动画 ease-in-out - 指定开始和结束较慢的动画 cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。 在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。 animation-fill-mode 属性可接受以下值： none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。