animation 取值情况：
(1)name : 动画名字
(2)duration ： 动画持续的时间
(3)animation-timing-function ：定义动画以什么速度曲线完成动画
①linear ： 动画从开始到结束的速度都是一样的；
②ease : 默认值，以低速开始，然后加快，结束前变慢；
③ease-in : 动画以低速开始；
④ease-out : 动画以低速结束；
⑤ease-in-out ：动画以低速开始和结束；
⑥cubic-bezier(n,n,n,n) ：n是0到1之间的数，定义自己的速度曲线；
(4)animation-delay ：动画延迟时间，默认为0，可以取负值，单位是秒或毫秒；
(5)animation-iteration-count ：定义动画的播放次数，或无限次播放（infinite）；
(6)animation-direction : 规定动画播放方式
①normal ： 默认值，正常播放；
②reverse ：动画反向播放；
③alternate：在奇数时正常播放，偶数时反向播放；
④alternate-reverse：在奇数时反向播放，偶数时正向播放；
(7)animation-fill-mode ：
(8)animation-play-state：取值有pause（暂停）和running（运行）
@keyframes规则：
使用@keyframes规则，通过在animation指定的持续时间内（duration）将一个CSS样式变换为另一个CSS样式，从而实现动画效果。
要使用动画选择器绑定样式实现动画效果，这里的动画选择器是必须的，有：
①%：有0%，20%， 30%等。
②from：动画开始，和0%一样；
③to：动画结束，和100%一样。
CSS样式的变化至少有两个，一个开始和一个结束的样式，用关键字from或0%指定开始的CSS样式；用关键字to或100%来指定结束时的CSS样式。
也可以使用n%来定义多个CSS样式，从而使动画效果经过多个CSS样式。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
例子：