动画animation

1. animation-name

animation-duration:move

 

2. keyframes

@keyframes{
            from{
                margin-left: 0px;
            }
            to{
                margin-right: 200px;
            }
        }

 

3. animation-duration

animation-duration:2s

 

4. animation-timing-function

 animation-timing-function:ease-in;

还可以：ease | linear | ease-in | ease-out | ease-in-out

5. 

animation-delay:1s;

 

6. animation-iteration-count

animation-iteration-count:2;

 

7. animation-direction

animation-direction:normal;

动画顺序：

normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

8. animation-play-state

animation-play-state：running;

动画状态：

running：运动
paused：暂停

9. animation-fill-mode

animation-fill-mode：none；

动画时间之外的状态：

none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

10. animation

复合属性

animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]