animation属性值

1、 animation-name：检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，
定义关键帧：
@keyframes mymove{}
animation-name:mymove;
语法一：@keyframes mymove{

                          from{初始状态属性}

                            to{结束状态属性}

                               } 

语法二：@keyframes mymove{

                                   0%{初始状态属性}

                                  100%{结束状态属性}

                                   }

2、 animation-duration：检索或设置对象动画的持续时间（s,ms）

3、 animation-delay：检索或设置对象动画延迟的时间（s,ms）

4、 animation-timing-function：检索或设置对象动画的过渡类型
属性值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

5、 animation-iteration-count：检索或设置对象动画的循环次数
属性值：
animation-iteration-count: infinite |
number；
infinite：无限循环
number: 循环的次数 2 3

6、 animation-direction：检索或设置对象动画在循环中是否反向运动
属性值：
normal：正常方向 0%
—— 100%
reverse：反方向运行 100%
—— 0%
alternate：动画先正常运行再反方向运行，并持续交替运行 0% —— 100% —— 0%；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
100% —— 0% —— 100%

7、 animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效backwards : 在延迟的情况下，让0%在延迟前生效
forwards :在运动结束的之后，停到结束位置
both : backwards和forwards同时生效

8、 animation-play-state：检索或设置对象动画的状态
属性值：
animation-play-state:running
| paused;
2020逆战班