animations功能与 transitions功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于：使用transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；而animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
语法 animation: namedurationtiming-functiondelayiteration-countdirection;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
一、animation-name
animation-name 属性为 @keyframes 动画规定名称。
语法 animation-name: keyframename|none;
| 值 | 描述 |
|---|---|
| keyframename | 规定需要绑定到选择器的 keyframe 的名称。 |
| none | 规定无动画效果（可用于覆盖来自级联的动画）。 |
二、animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
语法 animation-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。 |
三、animation-timing-function
animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
语法 animation-timing-function: value;
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-delay 属性定义动画何时开始。
语法 animation-delay: time;
| 值 | 描述 |
|---|---|
| time | 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。 |
五、animation-iteration-count
animation-iteration-count 属性定义动画的播放次数。默认值为１次，infinite为无限次。
语法animation-iteration-count: n|infinite;
| 值 | 描述 |
|---|---|
| n | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |
animation-direction 属性定义是否应该轮流反向播放动画。
语法animation-direction: normal|alternate;
| 值 | 描述 |
|---|---|
| normal | 默认值。动画应该正常播放。 |
| alternate | 动画应该轮流反向播放。 |
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。如果把动画设置为只播放一次（animation-iteration-count:１;），则该属性没有效果。默认值为normal。
七、animation-play-state
animation--play-state属性指定动画是否正在运行或已暂停。
语法 animation-play-state: paused | running;
| 值 | 描述 |
|---|---|
| paused | 指定暂停动画 |
| running | 指定正在运行的动画 |
八、animation-fill-mode
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
语法 animation-fill-mode: none|forwards|backwards|both|initial|inherit;
| 值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
九、@keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。您可以改变任意多的样式任意多的次数。用%来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。语法 @keyframes animationname { keyframes-selector { css-styles;}}
| 值 | 说明 |
|---|---|
| animationname | 必需的。定义animation的名称。 |
| keyframes-selector | 必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同)to (和100%相同) |
| css-styles | 必需的。一个或多个合法的CSS样式属性 |
@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }
Keyframes定义好了以后，还不能产生动画效果，需要把它捆绑到某个选择器。示例：
-moz-animation: mymove5s;-webkit-animation: mymove 5s;-o-animation: mymove 5s; -ms-animation: mymove 5s; animation: mymove 5s;