二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

站长

2024年04月21日 09:44 · 阅读数 2

过渡可以实现 两个状态 间的变化过程。

动画效果能实现 多个状态 间的变化过程，且动画的过程是可控的，如重复播放、是否暂停等。

动画的本质 是快速切换大量图片时，这时在人脑中就会形成具有连续性的画面

构成动画的最小单元是帧或者 动画帧

动画如何实现

（1）定义动画

只有两个动画状态时，可以用下图方式定义，form 表示元素的初始状态，to 表示元素变化之后的状态：

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

有多个动画状态时，则选用下图百分比的方式定义，这里的 百分比 指的是动画总时长的占比：

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

（2）使用动画

我们可以通过 animation 给元素添加动画效果，使用方式：animation:动画名称动画占用时长 ，动画名称就是上面定义动画时定义的名称。

动画效果在页面一刷新就会产生

两个状态：

    <style>
      @keyframes change{
        from {
          width: 100px;
        }
        to {
          width: 300px;
          height: 50px;
        }
      }
      .container {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        animation: change 1s;
      }
    </style>

  <body>
    <div class="container"></div>
  </body>

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

多个状态：

    <style>
      @keyframes change{
        0% {
          width: 100px;
        }
        50% {
          width: 300px;
        }
        100%{
          width: 50px;
        }
      }
      .container {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        animation: change 1s;
      }
    </style>

  <body>
    <div class="container"></div>
  </body>

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

动画属性

上边示例的动画，执行完之后，又会回到初始状态，如果想要让元素保持某种状态，要通过 控制动画的执行过程 来实现。

使用 animation 的相关属性可以有效控制动画的执行过程，具体写法如下：


animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 ;

以上属性使用时需注意，动画名称 和 动画时长 必须赋值，多个属性之间的 取值不分先后 ，如果有两个时间值，第一个时间表示动画时长，第二个时间则表示延迟时间

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

复合属性：

<!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: change 1s linear; */
            
            /* 分步动画 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 带有反向效果*/
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

拆分写：

<!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;
        }
        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

逐帧动画

使用 steps 实现 逐帧动画 ，开发中一般配合 精灵图 实现动画效果。

（1）什么是精灵图：

CSS 精灵图（sprite）直译为 “ CSS 精灵 ”，通常也被称为 “ CSS 图像拼合 ” 、 “ CSS 贴图定位 ” 或 “ CSS 图片精灵 ” 、 “ CSS 雪碧图 ” ，是一种网页图片应用处理方式。

简单来说就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当用户访问该页面的时候，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

采用精灵图可以缓解加载时间过长而影响用户体验问题，在一定程度上也减少了页面的加载速度，缓解服务器压力。

在网上随便找一幅精灵图试做动画：

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

（2）制作精灵动画

首先要准备一个 显示区域 ，把盒子的尺寸设置成一张小图的尺寸，当前精灵图就是盒子的背景，整个精灵图的高度是 124 像素，宽度是 1140 像素，一共有 11 个小图。

    <style>
      .box {
        margin: 50px auto;
        width: 104px;
        height: 124px;
        border: 1px solid #000;
        background-image: url(01.png);
      }
    </style>

  <body>
    <div class="box"></div>
  </body>

二十四、CSS3 之使用动画丰富网页效果和呈现方式（4）

定义动画 & 使用动画 上图选用了第一张小图，作为开始图片，然后需要改变背景图的位置，每个小图移动的距离就是精灵图的宽度；最后添加速度曲线 steps(N) ，将动画过程等分成 N 份：animation-timing-function:steps(N); N 与精灵图上小图的个数相同，再添加无限重复效果即可。

    <style>
      .box {
        margin: 50px auto;
        width: 104px;
        height: 124px;
        border: 1px solid #000;
        background-image: url(01.png);
        animation: move 1s steps(11) infinite; /*11个小图 */
      }
      @keyframes move {
        from {
          background-position: 0 0;
        }
        to {
          background-position: -1140px 0; /* 左移 */
        }
      }
    </style>

  <body>
    <div class="box"></div>
  </body>

多个动画

上面的动画效果是在原地移动，我们还可以增加 多个动画效果 ，如果在动画移动的同时，给盒子也添加位移动画，就能够实现让小人跑远一点的动画效果。

示例：从电脑左上角跑到右下角

<!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 {
        margin: 50px 0;
        width: 104px;
        height: 124px;
        /* border: 1px solid #000; */
        background-image: url(01.png);
        animation: move 1s steps(11) infinite, divRun 10s forwards;
      }
      @keyframes move {
        from {
          background-position: 0 0;
        }
        to {
          background-position: -1140px 0;
        }
      }
      @keyframes divRun {
        /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
        to {
          transform: translateX(600px) translateY(150px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>