对CSS动画的总结（二）：动画

1、设置box的动画 

            animation-name: 要对当前元素生效的关键帧的名字 

            例：

                animation-name: test; 

            animation-duration: 动画的执行时间 

            例：

                animation-duration: 4s; 

2、动画的延时 

            例：

                animation-delay: 2s; 

3、动画时序函数

            例：

                animation-timing-function: ease-in-out; 

4、动画执行的次数

            animation-iteration-count  

            可选值：

                 次数

                 infinite 无限执行

            例：

                animation-iteration-count: 1; 

5、指定动画运行的方向

             animation-direction    

                    可选值：

                    normal：默认值  从 from 向 to运行 每次都是这样 

                    reverse：从 to 向 from 运行 每次都是这样 

                    alternate：从 from 向 to运行 重复执行动画时反向执行

                    alternate-reverse：从 to 向 from运行 重复执行动画时反向执行

            例：

                animation-direction: alternate-reverse; 

6、设置动画的执行状态 

             animation-play-state

                可选值：

                    running 默认值 动画执行

                    paused 动画暂停

            例：

                animation-play-state: paused; 

7、动画的填充模式

            animation-fill-mode

                可选值：

                    none 默认值 动画执行完毕元素回到原来位置

                    forwards 动画执行完毕元素会停止在动画结束的位置

                    backwards 动画延时等待时，元素就会处于开始位置

                    both 结合了forwards 和 backwards

            例：

                animation-fill-mode: both; 

8、总结

                animation: test 2s 2 1s alternate;