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

最新推荐文章于 2024-11-05 20:28:58 发布

xing.org1^

最新推荐文章于 2024-11-05 20:28:58 发布

阅读量120

点赞数 1

本文链接：https://blog.csdn.net/xingorg/article/details/120426923

版权

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	向前和向后填充模式都被应用。	上边两个结合应用，开始前将第一帧先展示，结束后最后一帧定格不变。