前端基础CSS3-（动画）

一、动画属性animation

animation: 

name(动画名称-必选)   duration（持续时间-必选）     timing-function（运动曲线-可选）     

delay （何时开始可选）     iteration-count（播放次数-可选）   direction（是否反方向-可）     

fill-mode; （动画位置起始或者结束;-可选）

二、定义动画

除了0和100%，还可以用from和to来表示序列 

      动画序列

1.可以做多个状态的关键帧

2.里面的百分比要是整数

3.里面的百分比是总的时间的划分，这里是2s

@keyframes move {
        /* 开始状态 */
        0% {
          transform: translate(0px, 0px);
        }
        25% {
          transform: translate(1000px, 0);
        }
        50% {
          transform: translate(1000px, 500px);
        }
        75% {
          transform: translate(0px, 500px);
        }
        /* 结束状态 */
        100% {
          transform: translate(0, 0);
        }
      }

 三、调用动画