css笔记 - animation学习笔记(二)

animation动画

@keyframes规则 - 创建动画

from - to 等价于 0% - 100%
但是优先使用0% - 100%，因为浏览器兼容性还好点

animation 动画绑定

  • 将keyframes动画规则绑定到选择器。

  • 必须设定动画的名称和时长。

  • 所有动画属性

animation-name

keyframes动画的名称

属性 含义 备注
动画名称 就是keyframes规定的动画名称 不设置动画不成功
none 设置后无动画效果 如果真的没有动画就不需要设置，但是这个功能的特殊用途用于覆盖级联的动画。

animation-duration

规定动画完成一个周期所花费的秒(.2s)、毫秒(200ms)

animation-timing-function

速度曲线(三次贝塞尔曲线)

属性 含义 备注
linear 匀速运动
ease 慢 - 快 - 慢
ease-in 慢 - 快
ease-out 快 - 慢
ease-in-out 慢 - ~ - 慢
cubic-bezier 自定义 上边这几个属性，都会在关键帧之间插入补间动画。使得动画效果连贯。
steps()函数 逐帧动画 适用于关键帧的跳跃

针对上边五个三次贝塞尔，其对比效果看下边w3c的效果一目了然

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 100px;
      height: 50px;
      background: red;
      color: white;
      font-weight: bold;
      position: relative;
      animation: mymove 5s infinite;
      -webkit-animation: mymove 5s infinite;
      /* Safari and Chrome */
    }

    #div1 {
      animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
    }

    #div2 {
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    #div3 {
      animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    }

    #div4 {
      animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    }

    #div5 {
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    }

    /* Safari and Chrome: */

    #div1 {
      -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
    }

    #div2 {
      -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    #div3 {
      -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    }

    #div4 {
      -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    }

    #div5 {
      -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    }

    @keyframes mymove {
      from {
        left: 0px;
      }
      to {
        left: 300px;
      }
    }

    @-webkit-keyframes mymove
    /* Safari and Chrome */

      {
      from {
        left: 0px;
      }
      to {
        left: 300px;
      }
    }
  </style>
</head>

<body>

  <p>
    <strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>

  <div id="div1">linear</div>
  <div id="div2">ease</div>
  <div id="div3">ease-in</div>
  <div id="div4">ease-out</div>
  <div id="div5">ease-in-out</div>

</body>

</html>

特殊的 steps()函数

参数 含义 备注
正整数 指定时间函数中的间隔数量 必须是正整数
start/end 设置最后一步的状态 start为结束时的状态（第一帧是第一步动画结束），end为开始时的状态(第一帧是第一步动画开始)

定义steps的keyframes规则中，所有关键帧必须写出来，
比如我下边这个demo中

    @keyframes bgChange {
      0% {
        background-position-x: 0px;
      }
      20% {
        background-position-x: -90px;
      }
      40% {
        background-position-x: -181px;
      }
      60% {
        background-position-x: -271px;
      }
      80% {
        background-position-x: -359px;
      }
      100% {
        background-position-x: -449px;
      }
    }

如果只改成from{} to{}两帧，动画跑不起来。同样的0% - 100% 也不可以。

animation-delay 延迟动画

动画延迟开始时间

animation-iteration-count: infinite；循环动画

动画播放次数

  • 常用 infinite

animation-direction 反向动画

是否逆向播放

属性 含义
normal 正常播放
alternate 反向

alter： vt. 改变，更改

animation-play-state 暂停动画

是否运行or暂停动画

属性 含义
paused 暂停
running 跑起来，运行

巧妙的运用该属性，鼠标经过的时候设置为运行，鼠标离开即变回默认的暂停状态。

animation-fill-mode

动画时间之外的状态

属性 含义 备注
none 不改变默认行为
forwards 动画完成后，保持最后一个属性值（在最后一个关键帧中定义） 感觉就像定格最后一针的效果不变
backwards 延迟执行时间段内，动画开始前，应用开始属性值（在第一帧中定义） 同上，只不过将变化的第一帧先定格展示出来
both 向前和向后填充模式都被应用。 上边两个结合应用，开始前将第一帧先展示，结束后最后一帧定格不变。
posted @ 2018-08-28 18:50  xing.org1^  阅读(269)  评论(0)    收藏  举报