animation动画

1、@keyframes 定义关键帧动画  

2、animation-name 动画名称  

3、animation-duration 动画时间  

4、animation-timing-function 动画曲线 

             linear 匀速 ease 开始和结束慢速

             ease-in 开始是慢速

             ease-out 结束时慢速

             ease-in-out 开始和结束时慢速

             steps 动画步数  

5、animation-delay 动画延迟  

6、animation-iteration-count 动画播放次数n|infinite

7、animation-direction 动画是否返回        

             normal 默认动画结束不返回        

             alternate 动画结束后返回(原路返回,不写会突然收回)

动画状态一般单独写，不在简写里      

8、animation-play-state 动画状态       

             paused 停止        

             running 运动      

9、animation-fill-mode 动画前后的状态       

             none ：不改变默认行为（不写时默认none）       

             forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）   

             backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）       

             both 向前和向后填充模式都被应用      

10、简写：animation:name duration timing-function delay iteration-count direction both;同时设置多个属性

                                动画名称 动画时间 动画曲线        动画延迟 动画播放次数    动画是否返回 动画前后状态

---

鼠标移入后运动

.box:hover{

        animation-play-state: running;

}

@keyframes 定义关键帧动画

@keyframes charry {

/*起始状态*/

  from{

        width:200px;        /*动画的起始值，从200px开始有动画特效*/

  }

/*结束状态*/

  to{

        width:500px;        /*动画的结束值，从500px结束动画特效*/

  }

animation:charry 1s ease 1s 5 alternate both;

动画名称|动画运行的时间| ease:开始和结束慢速 |延迟1s| 动画执行次数（infinite：不限次数）|alternate:原路返回（也算一次）| forwards:停留在最后状态（可以替换forwards，both：结束和起始模式一起设置）

起始时暂停：animation-play-state: paused;