CSS学习笔记：动画——使用animation添加动画效果

过渡和动画

啥是过渡?

例如transition: all 0.5s; -> 拥有该属性的标签，在样式改变时，将在设定的时间内逐渐过渡到另一个样式

啥是动画？

和过渡有点类似，只不过常常用于实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

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

构成动画的最小单元：帧或动画帧

何时使用过渡？

实现2个状态间的变化过程

何使使用动画？

实现多个状态间的变化过程，且需要控制重复播放、最终画面、是否暂停等复杂功能

动画实现步骤

keyframes的中文意思是关键帧

动画花费时长单位是秒（s）

方法二中的百分比指的是时间占比，比如定义的动画时长是1秒，那么10%指的就是在总时长的0%到10%之间（0秒到0.1秒之间），元素样式会从状态一过渡到状态二

代码示例

<!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变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

浏览器预览效果：粉色立方体在1秒内放大

过渡属性

复合属性

拆分写法

补充：速度曲线取值为linear时，为匀速运动

代码示例

<!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: 重复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>

速度曲线steps实现逐帧动画

补间动画与逐帧动画

补间动画：平滑过渡（CSS动画默认是补间动画）

逐帧动画：跳跃突变

补间动画在工作中更常用，逐帧动画常常配合精灵图使用

什么是精灵图？

见博客：CSS精灵图-CSDN博客

提示：当逐帧动画配合精灵图时，N等于精灵图的小图数量

代码示例

利用精灵图实现一个小人跑动的动画

首先需要准备下图

代码设计思路

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* 多组动画，逗号隔开 */
      animation:
        run 1s steps(12) infinite,
        move 3s linear forwards;
    }


    /* 实现小人在原地的跑步动作 */
    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    /* 实现小人位移 */
    @keyframes move {
      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>

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

</html>