/* 单一动画的语法格式 */animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-fill-mode];
css3动画都可以包含以下的动画属性：
animation-name：指定由@keyframes描述的关键帧名称。- animation-duration：设置动画一个周期的时长。
animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。- animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
- animation-iteration-count：设置动画重复次数， 可以指定infinite无限次重复动画。
- animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
- animation-fill-mode：指定动画执行前后如何为目标元素应用样式。
你可以为animation-direction提供多个值，各个值之间使用逗号来分隔。如果你设置了多个值，这些值通常和animation属性相关的其它属性的值一一对应，例如animation-name属性、animation-delay属性和animation-timing-function属性等。
例如，如果你提供了2个animation-direction的值，那么第一个值将决定animation-name中第一个动画是否反向播放，第二个值将决定animation-name中第二个动画是否反向播放。
animation-direction: normal | reverse | alternate | alternate-reverse
normal：每个循环内动画向前循环，也就是说，每个动画循环结束，动画重置到起点重新开始，这是默认属性。reverse：反向运行动画，每周期结束后，动画由尾部向头部运行。alternate：动画交替反向运行。反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代。alternate-reverse：反向交替。动画播放周期内奇数次的动画反向播放，偶数次的动画正常播放。也就是说，第一个播放动画结束后从动画尾部向前播放，然后第二个播放动画结束后从动画头部向后播放，第三个动画结束后从动画尾部项头部播放，以此类推。
