CSS动画_css 动画-CSDN博客

本文链接：https://blog.csdn.net/m0_57851747/article/details/134631530

css动画

一.动画
二.逐帧动画
三.多组动画
四.走马灯动画

一.动画

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元:帧或动画帧

之前学过的过渡类似动画但它只能实现两个状态之间的变化，而动画能够实现多个状态之间的切换，其过程也可控，这些都是过渡做不到的

动画属性名:animation: 动画名称动画花费时长…（后面还有一系列属性）;

1.实现步骤

首先是定义动画，有两种，一种是两种状态的切换，另外一种是多种状态的切换，定义如图：

在这里插入图片描述
多种状态的切换中的百分比时具体要求而定，其表示某个时间段的状态

定义完动画后就是使用动画：
在这里插入图片描述
其animation加在动画对应元素中，必须要有动画名称还有动画花费时长才能生效。
示例：

<!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>
        .box {
            width: 211px;
            height: 211px;
            background-color: pink;
            /* animation: change 2s; */
            animation: change1 2s;
        }
        /* 两种状态的切换 */
        @keyframes change {
            from {width: 211px;
            }
            to{width: 1111px;
            }
        }
        /* 多状态切换 */
        @keyframes change1 {
            0%{
                width: 211px;
            }
            50%{
                width: 411px;
                height: 411px;
            }
            100%{
                width: 111px;
                height: 111px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

若动画的初始状态跟元素默认样式相同，那么动画初始状态（form）可省略不写。

2.动画拆分属性(不常用)

拆分属性值：
在这里插入图片描述

3.动画复合属性连写(常用)

属性连写如下：
在这里插入图片描述
注意点：

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

示例：

<!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>
        .box {
            width: 211px;
            height: 211px;
            background-color: pink;
            animation: change 2s;
            /* 匀速(了解) */
            animation: change 2s linear;
            /* 分步动画 */
            animation: change 2s steps(4);
            /* 延迟时间 */
            animation: change 2s steps(4) 1s;
            /* 重复三次播放 */
            animation: change 2s steps(4) 3;
            /* 无限循环播放 */
            animation: change 2s steps(4) infinite;
            /* 动画播放方向（反向alternate） */
            animation: change 2s steps(4) infinite alternate;
            /* 动画停留状态（forwards最终状态，backwards最初状态），不可与无限播放次数与播放方向（双向）一起使用 */
            animation: change 2s steps(4) forwards;


        }
        /* 两种状态的切换 */
        @keyframes change {
            from {width: 211px;
            }
            to{width: 1111px;
            }
        }

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

二.逐帧动画

动画拆分属性：animation-timing-function表示速度曲线，当他取值steps（）时为逐帧动画，比如取值linear(匀速)则表现为补间动画。

逐帧可以理解为是时钟中的秒针在一秒内的移动是跳跃的，没有一个变化过程，总的看起来就是秒针在一格一格的移动
而补间动画则是秒针在一秒内的移动是连贯的，总体看起来就是秒针一直在移动

逐帧动画一般应用于精灵图中，把每个精灵小图当作每一帧，然后运用逐帧动画使其动作连贯起来。

例如下列精灵图，每一只熊就是一个精灵小图，也就是每一帧动画，要使其动起来，就需要定义一个盒子跟精灵小图（小熊）的尺寸一致，然后通过动画使其从第一张精灵小图变化到最后一张（这里最终状态的background-position中水平方向的值要取精灵图的长度，因为这样才能包括所有精灵小图），动画的速度曲线用逐帧动画，也就是animation-timing-function取steps()，括号里的值为精灵小图的数量也就是总共多少帧，然后定义动画其他属性就能让精灵小图“动起来”了，也就是我们这里的小熊跑起来了
在这里插入图片描述
代码如下：

<!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>
        .bear {
            margin: 55px auto;
            /* 保证显示区域的尺寸与精灵小图一致 */
            width: 200px;
            height: 100px;
            background-color: skyblue;
            background-image: url(./bear.png);
            /* steps中的8表示精灵小图的个数 */
            animation: move 1s steps(7) infinite;

        }
        @keyframes move {
            from {
                background-position: 0 0;

            }
            /* 1400px为精灵图的宽度 */
            to {

                background-position: -1400px 0;
            }
            
        }
    </style>
</head>
<body>
    <div class="bear"></div>
</body>
</html>

三.多组动画

上面我们完成的逐帧动画只是在一个区域内表现出小熊的移动，就像是原地踏步，如果我们要让小熊真正走起来，那么就需要让小熊所在的盒子动起来，所以这里就用到了不止一个动画，也就是多组动画
语法：

animation:
动画名称动画时长…,
动画名称1 动画时长…,
动画名称n 动画时长…;

示例（让小熊跑出距离来）：

<!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>
        body {
            background-color: skyblue;
        }
        
        .bear {
            /* 保证显示区域的尺寸与精灵小图一致 */
            width: 200px;
            height: 100px;
            background-image: url(./bear.png);
            /* 定义多组动画 */
            animation: move 1s steps(8) infinite,
            run 5s forwards;
        }
        @keyframes move {
            /* 当初始状态与盒子默认样式一致，可以省略开始状态的代码（from） */
            /* from {
                background-position: 0 0;

            } */
            /* 1600px为精灵图的宽度 */
            to {

                background-position: -1600px 0;
            } 
        }
        /* 定义盒子的移动动画 */
        @keyframes run {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(800px);

            }
        }
    </style>
</head>
<body>
    <div class="bear"></div>
</body>
</html>

四.走马灯动画

走马灯动画意思是在一个区域内自动轮播图片，同时轮播的图片数量按需求定义，轮播的图片为有限张，也就是说轮播到最后一张后面自动接上第一张图片再进行轮播以此类推。但是会出现一些问题，比如轮播的图片有七张，同时轮播区域的大小只有三张图片，那么就会出现空隙，如图：
在这里插入图片描述
为解决这个问题，我们需要在尾部再添加上轮播区域内可存放的图片数量，而添加的图是从第一张开始的图，这里就是三张图片即（1，2，3）总共有十张图片，然后再进行轮播，轮播到第十张后就继续回到第一张再开始轮播，视觉上表现出来就是头尾相接，其则不然而是播到倒数第三张后一瞬间跳到第一张再继续轮播。
在这里插入图片描述

这时就有人有疑问了：为什么要添加添加图片能，不能播到第五张就重新开始播吗？
这样确实轮播了所有图片，但是每次轮播第5，6，7张图片就固定在那个位置，也就是第五张只能出现在轮播区域第一个位置，第六张只能在第二个位置，第七张只在第三个位置，这样就“区别对待”了。
示例：

<!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>
        .box {
            width: 333px;
            height: 333px;
            border: 1px solid #000;
            margin: 21px auto;
        }
        img {
            width: 111px;
        }
        ul {
            animation: move 5s infinite linear;
        }
        li {
            float: left;
        }
        @keyframes move {
            to {
                /* 七张图片总长度 */
                transform: translateX(-777px);
            }
            
        }
        .box:hover ul{
            /* 当鼠标悬停到box区域时停止移动 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <!-- 一张图片宽高111px -->
            <li><img src="./1.png" alt=""></li>
            <li><img src="./2.png" alt=""></li>
            <li><img src="./3.png" alt=""></li>
            <li><img src="./4.png" alt=""></li>
            <li><img src="./5.png" alt=""></li>
            <li><img src="./6.png" alt=""></li>
            <li><img src="./7.png" alt=""></li>
            <li><img src="./1.png" alt=""></li>
            <li><img src="./2.png" alt=""></li>
            <li><img src="./3.png" alt=""></li>
        </ul>
    </div>
</body>
</html>