CSS3(十三) CSS3 关键帧
CSS3
CSS3
发布日期:   2020-05-08
更新日期:   2020-05-24
文章字数:   1.2k
阅读时长:   6 分
阅读次数:  

关键帧–keyframes

  • 类似于 flash

  • 只需指名两个状态,之间的过程由计算机自动计算

  • 关键帧的时间单位

    • 数字: 0% 25% 100%等(不写 0%或 100%的状态,就默认为已经设置的样式)
    • 字符: from(0%) , to(100%)

  • 格式(1)

    • @keyframes 动画名称{动画状态}

  • 格式 (2)

  • @keyframes move{from{background:red;} to {background:green};}

  • 可以只有 to

animation 基本使用

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>关键帧</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    @-webkit-keyframes move {
      0% {
        width: 0px;
      }
      30% {
        width: 50px;
      }
      50% {
        width: 100px;
      }
      75% {
        width: 150px;
      }
      100% {
        width: 200px;
      }
    }
    @-moz-keyframes move {
      0% {
        width: 0px;
      }
      30% {
        width: 50px;
      }
      50% {
        width: 100px;
      }
      75% {
        width: 150px;
      }
      100% {
        width: 200px;
      }
    }
    @keyframes move {
      0% {
        width: 0px;
      }
      30% {
        width: 50px;
      }
      50% {
        width: 100px;
      }
      75% {
        width: 150px;
      }
      100% {
        width: 200px;
      }
    }
    .box {
      background: red;
      width: 200px;
      height: 30px;
      border: 1px solid black;
      -webkit-animation: 2s move linear;
      -moz-animation: 2s move linear;
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>

animation 属性

-webkit-animation: 动画时间 延迟时间 动画名称 运动状态 次数 播放前重置

-webkit-animation:2s 1s move linear infinite alternate

动画播放暂停

  • animation-play-state: 播放状态(running 播放和 paused 暂停)

播放前重置（用的很少）

  • alternate:动画直接从上一次挺值得位置开始执行
  • normal :动画第二次直接跳到 0%的状态开始执行

animation-Js 结合

  • 通过 class
    • 在 class 里面加入 animation 的各种属性
    • 直接给元素加入 -webkit-animation-xxx 样式
  • animation 的问题
    • 写起来麻烦
    • 没办法改变目标点的位置

obj.addEventListener(“webkitAnimationEnd”,function(){})

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>走回字和暂停播放</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      margin: 100px auto;
      position: relative;
    }
    @-webkit-keyframes move {
      25% {
        left: 370px;
        top: 0px;
      }
      50% {
        left: 370px;
        top: 370px;
      }
      75% {
        left: 0px;
        top: 370px;
      }
      100% {
        left: 0px;
        top: 0px;
      }
    }
    .box:hover .circle {
      -webkit-animation-play-state: paused;
    }
    .circle {
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      top: 0px;
      -webkit-animation: 4s 1s move infinite;
    }
  </style>
  <body>
    <div class="box">
      <div class="circle"></div>
    </div>
  </body>
</html>

正序倒序播放

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>走回字和暂停播放</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 100px auto;
      position: relative;
    }
    @-webkit-keyframes move {
      25% {
        left: 70px;
        top: 0px;
      }
      50% {
        left: 70px;
        top: 70px;
      }
      75% {
        left: 0px;
        top: 70px;
      }
      100% {
        left: 0px;
        top: 0px;
      }
    }
    .box:hover .circle {
      -webkit-animation-play-state: paused;
    }
    .circle {
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      top: 0px;
      -webkit-animation: 4s 1s move infinite alternate;
    }
  </style>
  <body>
    <div class="box">
      <div class="circle"></div>
    </div>
  </body>
</html>

处理完毕后回到默认的样式

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>animation后面加class</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 100px auto;
      position: relative;
    }
    @-webkit-keyframes move {
      0% {
        left: 0px;
        top: 0px;
      }
      25% {
        left: 70px;
        top: 0px;
      }
      50% {
        left: 70px;
        top: 70px;
      }
      75% {
        left: 0px;
        top: 70px;
      }
      100% {
        left: 0px;
        top: 0px;
      }
    }
    .circle {
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .move {
      -webkit-animation: 4s 1s move; /*最后的left*/
      left: 70px;
    }
    p {
      font-size: 23px;
      text-align: center;
    }
  </style>
  <body>
    <p>通过类名加动画效果</p>
    <div class="box">
      <div class="circle move"></div>
    </div>
  </body>
</html>

animationed 事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>配合animationEnd</title>
    <style>
      @-webkit-keyframes move {
        0% {
          width: 100px;
        }
        100% {
          width: 500px;
        }
      }
      @-moz-keyframes move {
        0% {
          width: 100px;
        }
        100% {
          width: 500px;
        }
      }
      @keyframes move {
        0% {
          width: 100px;
        }
        100% {
          width: 500px;
        }
      }
      .box {
        width: 100px;
        height: 100px;
        background: red;
      }
      .move {
        -webkit-animation: 2s move;
        -moz-animation: 2s move;
        animation: 2s move;
        width: 500px;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p>点击后配合animationEnd事件点击后就会变化</p>
    <div class="box" id="box"></div>
    <script>
      document.getElementById('box').onclick = function () {
        this.className = 'box move'
        addEnd(this, fn)
      }

      function fn() {
        alert('end')
      }

      function addEnd(obj, fn) {
        obj.addEventListener('webkitAnimationEnd', fn, false)
        obj.addEventListener('animationend', fn, false)
      }
    </script>
  </body>
</html>

简易版本的无缝滚动

  • 代码如下
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>简易版本的无缝滚动</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    ul {
      list-style-type: none;
    }
    li {
      float: left;
    }
    #wrap {
      width: 250px;
      height: 50px;
      position: relative;
      bordr: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }
    #wrap ul {
      position: absolute;
      left: 0px;
      top: 0px;
      height: 50px;
      width: 500px;
      -webkit-animation: 3s 1s move infinite;
    }
    #wrap ul li {
      width: 50px;
      height: 50px;
      font: 24px/50px '微软雅黑';
      background: black;
      color: #ffffff;
      text-align: center;
    }
    @-webkit-keyframes move {
      0% {
        left: 0px;
      }
      100% {
        left: -250px;
      } /*走的距离就是盒子的宽度*/
    }
    #wrap:hover ul {
      -webkit-animation-play-state: paused;
    }
  </style>
  <body>
    <div id="wrap">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </body>
</html>

以上 CSS3 animation 知识点全部完毕

文章作者: 雾烟云
文章链接: https://jsopy.gitee.io/2020/05/08/css313/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
CSS3
  目录