欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用CSS3的animation steps属性实现跳帧动画

程序员文章站 2024-01-15 08:49:10
...

steps参数对应的是animation-timing-function|动画速度曲线。

steps()指定了两个参数，一个为整数值，表示跳帧动画间隔数量，第二个为start和end，默认为end，表示这种跳帧动画是在间隔的起点还是终点变化。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span{
      border-top: 7px solid #1890ff;
      border-right: 7px solid #1890ff;
      display: inline-block;
      transform: rotate(45deg);
    }
    .an1{
      width: 12px;
      height: 12px;
      animation: myani1 1s steps(1) alternate infinite;
    }
    
    .an2{
      width: 16px;
      height: 16px;
      animation: myani2 1s steps(1) alternate infinite;
    }

    .an3{
      width: 20px;
      height: 20px;
      animation: myani3 1s steps(1) alternate infinite;
    }
    .an4{
      width: 24px;
      height: 24px;
      animation: myani4 1s steps(1) alternate infinite;
    }frames myani1 {
      0%{
        opacity: 0.5;
      }
      15%{
        opacity: 1;
      }
    }
    @keyframes myani2 {
      0%{
        opacity: 0.5;
      }
      30%{
        opacity: 1;
      }
    }
    @keyframes myani3 {
      0%{
        opacity: 0.5;
      }
      45%{
        opacity: 1;
      }
    }
    @keyframes myani4 {
      0%{
        opacity: 0.5;
      }
      60%{
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <span class="an1"></span>
    <span class="an2"></span>
    <span class="an3"></span>
    <span class="an4"></span>
  </div>
</body>
</html>

效果图：

使用CSS3的animation steps属性实现跳帧动画

不使用steps实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画</title>
  <style>
    .aniItem{
      display: inline-block;
      width: 12px;
      height: 12px;
      border-top:7px solid #000;
      border-right:7px solid #000;
      transform: rotate(45deg);
      opacity: 0.2;
      animation: myani 1.5s infinite;
    }
    .ani2{
      width: 16px;
      height: 16px;
      animation-delay: 0.375s;
    }
    .ani3{
      width: 20px;
      height: 20px;
      animation-delay: 0.75s;
    }
    .ani4{
      width: 24px;
      height: 24px;
      animation-delay: 1.125s;
    }
    @keyframes myani {
      0%{
        opacity: 1;
      }
      33%{
        opacity: 0.74;
      }
      66%{
        opacity: 0.48;
      }
      100%{
        opacity: 0.2;
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <span class="ani1 aniItem"></span>
    <span class="ani2 aniItem"></span>
    <span class="ani3 aniItem"></span>
    <span class="ani4 aniItem"></span>
  </div>
</body>
</html>

效果图：

使用CSS3的animation steps属性实现跳帧动画

相关标签： CSS HTML_CSS学习日志

上一篇： php5编程中的异常处理详细方法介绍_php技巧

下一篇： gvim用着不知道按到哪里出现的提示语不是中文了，如何改回中文，请各路大神帮帮忙，多谢！

推荐阅读