前端基础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);
        }
      }

 三、调用动画

animation-name: move;  （move即是动画名称，自己定义的名称）

animation-duration: 2s;      （持续时间，指完成一次动画所需的时间，单位是秒-s）

 animation-timing-function: linear; （运动曲线，属性值：

        linear ：动画从头到尾的速度是相同的。

        ease：  默认。动画以低速开始，然后加快，在结束前变慢。

        ease-in ：动画以低速开始。

        ease-out： 动画以低速结束。

        ease-in-out：  动画以低速开始和结束

        cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中自己的值。（可能的值是从 0 到 1 的数值。）

        steps()指定了时间函数中的间隔数量（步长，分几步一节一节的增长）

animation-delay: 1s;  （何时开始，这里代表一秒后开始，默认是0；单位是秒s）

animation-iteration-count: 1;    （ 循序次数，默认1；无限循环用属性值：infinite）

animation-direction: alternate;     (是否为反方向播放，当播放次数在两次及以上的时候，下一次播放就会以上一次播放的路径沿着相反方向返回，默认是normal，反方向就写：alternate，)

animation-fill-mode: forwards;    （规定动画结束时候的状态，是在起始的位置还是在最终的位置；回到起始状态：backwards（默认）；停留在结束状态：forwards）

 可简写

animation: move 3s linear 1s   2   alternate   forwards; 

上面就表示：动画名称为move；持续3s；匀速播放；循环两次；第二次反方向回来；停留在结束位置；

      /* 定义动画 */
      @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);
        }
      }
      .box {
        height: 200px;
        width: 200px;
        background-color: skyblue;   
        animation: move 5s steps(10) infinite alternate;
      }
      div:hover {
        /* 鼠标经过div就停止动画，running正在运行；paused暂停 */
        animation-play-state: paused;
      }

停止动画，一般搭配动作一起使用

animation-play-state: paused;         （鼠标经过div就停止动画，running正在运行；paused暂停）

div:hover {
        /* 鼠标经过div就停止动画，running正在运行；paused暂停 */
        animation-play-state: paused;
      }