移动Web-动画_web位移动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_48719464/article/details/135939149

本文详细介绍了CSS动画的实现，包括定义动画、使用关键帧控制动画效果（如宽度变化、步进动画、无缝动画和精灵动画）、动画复合属性的应用以及如何创建多组动画。实例演示了走马灯效果和精灵图的逐帧动画技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、动画-animation

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

1.1 实现步骤

1.1.1 定义动画

1.1.2 使用动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画实现步骤</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        animation: change 1s;
      }

      /* 动画一：宽度从200变化到800 */
      /* @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      } */


      /* 动画二：从 200*100 变化到 300*300 变化到800*500 */
      /* 百分比：表示的意思是动画时长的百分比 */
      @keyframes change {
        0% {
            width: 200px;
            height: 100px;
        }
        20% {
            width: 300px;
            height: 300px;
        }
        100% {
            width: 800px;
            height: 500px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2、animation属性

提示：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

2.1 animation复合属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation复合属性</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear：匀速 */
        animation: change 1s linear;

        /* steps：分步动画，工作中，配合精灵图实现精灵动画 */
        animation: change 1s steps(3);

        /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
        animation: change 1s 2s;

        /* 重复次数，infinite：无限循环 */
        animation: change 1s 3;
        animation: change 1s infinite;

        /* alternate：反向 */
        animation: change 1s infinite alternate;

        /* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }

      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2.2 animation拆分属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation拆分写法</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        /* 动画名称 */
        animation-name: change;
        /* 动画时长 */
        animation-duration: 1s;
        /* 播放次数 */
        animation-iteration-count: infinite;

        /* animation-play-state: paused; */
      }

      .box:hover {
        /* 暂停动画 */
        animation-play-state: paused;
      }


      /* 宽度从 200 变化到 800 */
      @keyframes change {
        0% {
            width: 200px;
        }
        100% {
            width: 800px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

3、案例-走马灯效果

无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走马灯</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        display: flex;
        animation: move 6s infinite linear;
      }

      /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
      @keyframes move {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-1400px);
        }
      }

      .box:hover ul {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 替身：填补显示区域的露白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

4、动画-逐帧动画

核心原理：

steps()逐帧动画
CSS精灵图
精灵动画制作步骤

准备显示区域
盒子尺寸与一张精灵小图尺寸相同
定义动画
移动背景图（移动距离=精灵图宽度）
使用动画
steps(N)，N与精灵小图个数相同

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

5、动画-多组动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多组动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards
      ;
    }

    /* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */
    @keyframes run {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      /* 0% {
        transform: translate(0);
      } */
      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>