1、animate介绍

1. @keyframes  自定义动画名称 {
        from {
        }
        to {
        }
    }

2. 通过动画名称调用动画集
    animation-name： 动画集名称。

3. 属性介绍：
     /* 1. 通过动画集名称调用动画 */
        animation-name: box_move;
     /* 2.设置动画执行时间 */
         animation-duration: 1s;
      /* 3. 动画默认执行次数是1次, infinite: 无限次 */
        animation-iteration-count: infinite; 
     /* 4. 设置动画的速度类型:  ease ; */
       animation-timing-function: linear;
     /* 5. 设置延时执行时间 */
       animation-delay: 2s;
      /* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/
      animation-direction: alternate;
     /* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */
       animation-fill-mode: forwards;
     /* 8。 动画播放状态设置： running | paused暂停 */
       animation-play-state: paused;

4. animation复合写法：
    例如： animation: box_move 1s linear 2s alternate  forwards;
    注意：
        1. 一个元素可以同时调用多个动画集，使用逗号隔开。
         例如：
               animation:  box_move 1s,
                       one 1s linear 1s,
                       three 2s ease 5s alternate;

        2.  可以将一个完整的动画分割成若干个阶段执行
            @keyframes one {
                0% {}
                10% {}
                20% {}
                ...
                100%{}
            }
             百分比是相对整个动画执行时间而设置的。

2、案例

案例效果：盒子先水平向右移动300px；接下来向下移动300px，然后向左移动300px，最后向上移动300px又回到原点，其中每次改变方向都要变化背景颜色，循环往复执行。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      /* margin: 100px auto; */
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: move 8s linear infinite forwards;
                 
    }
    @keyframes move {
      from {}
      25% {
        transform: translateX(300px);
        background-color: red;
      }
      50% {
        transform: translateX(300px) translateY(300px);
        background-color: green;
      }
      75% {
        transform: translateX(0px) translateY(300px);
        background-color: yellow;
      }
      to {
        transform: translateY(0px);
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>

CSS3新特性—animate动画

1、animate介绍

2、案例

猜你喜欢