css中关于animation动画的使用

1. 定义动画名字-move

   @keyframes move {
               0% {
                   transform: translate(0,0);
               }
               100% {
                   transform: translate(200px,0);
               }
           也可以写成 
               from {
                   transform: translate(0,0);
               }
               to {
                   transform: translate(200px,0);
           }

2. 调用动画(谁使用谁调用)

   div {
       animation:move 1s;
   }

     3.动画的属性                      其中动画名称和动画时长为必须属性值

      4.动画属性--速度曲线 一般采用linear匀速/steps()帧两种方式,使用精灵图播放照片时一般使用steps()

      5.动画属性--延迟时间 就是动画从第几秒开始播放

      6.重复次数--选择动画重复次数 infinite为无限次进行播放

      7.动画方向默认从左到右,可以选择alternate属性值进行左到右,右到左进行摆动,类似于钟摆动画的方向

      8.  执行完毕时的状态,默认回初始位置(backwards),若执行完毕时想要位置在结束位置时,使用forwards.