CSS3新特性—animate

参考：CSS动画简介——阮一峰

 

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 盒子移动案例

案例效果：

1. 盒子先水平向右移动100px；接下来向下移动100px，
2. 然后向左移动100px，最后向上移动100px又回到原点，
3. 其中每次改变方向都要变化背景颜色，循环往复执行

代码实现：

<!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 {
        width: 30px;
        height: 30px;
        background-color: blue;
        animation: move 8s linear infinite forwards;
      }
      @keyframes move {
        from {
        }
        25% {
          transform: translateX(100px);
          background-color: red;
        }
        50% {
          transform: translateX(100px) translateY(100px);
          background-color: green;
        }
        75% {
          transform: translateX(0px) translateY(100px);
          background-color: yellow;
        }
        to {
          transform: translateY(0px);
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

 

3 抛物线案例

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style>
      body {
        position: relative;
      }
      .animation {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #ed3;
        animation: r 1.5s linear 0s infinite forwards,
          l 1.5s cubic-bezier(0, 0, 1, 0) 0s infinite forwards;
      }
      @keyframes r {
        from {
          left: 0;
        }
        to {
          left: 120px;
        }
      }
      @keyframes l {
        from {
          top: 0;
        }
        to {
          top: 340px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

 

posted @ 2018-06-30 16:19  U型枕  阅读(497)  评论(0)  编辑  收藏  举报