一篇文章带您学会CSS的动画

动画和过渡的区别

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

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

动画的实现步骤

1.定义动画

书写格式

css 复制代码

@keyframes 动画名称{
	from{}
	to{}
}

2.使用格式

书写格式

css 复制代码

animation:动画名称 动画花费的时间;

完整的书写格式

css 复制代码

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

说明：动画名称和动画时长必须赋值，取值不分先后顺序，第一个时间表示动画时长，第二个时间表示延迟时间。

动画属性说明：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards:最后一帧状态。backwards：第一帧状态
animation-timing-function	速度曲线	steps（数字）：逐帧动画
animation-iteration-count	重复次数	infinite 为无限循环
animation-direction	动画执行方向	alternate为反复
animation-play-state	暂停动画	paused为暂停，通常配合:hover一起使用

动画体验

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>Document</title>
    <style>
        /* 定义动画 */
        @keyframes ani {
            form{
                background-color: red;
            }
            to{
                background-color: blue;
            }
        }
        /* 使用动画 */
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            /*它变化颜色不是一下就过了，而是有一个过渡，我们称之为补帧动画*/
            animation: ani 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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>Document</title>
    <style>
        @keyframes ani {
            0% {
                background-color: red;
                transform: scale(1.1);
            }

            1% {
                background-color: rgb(65, 46, 46);
                transform: scale(1.5);
            }

            9% {
                background-color: rgb(169, 227, 36);
                transform: scale(2);
            }

            20% {
                background-color: rgb(10, 223, 155);
                transform: scale(2.2);
            }

            30% {
                background-color: rgb(10, 223, 155);
                transform: scale(2.2);
            }

            50% {
                background-color: aquamarine;
                transform: scale(0.5);
            }

            80% {
                background-color: rgb(85, 18, 218);
                transform: scale(0.1);
            }

            90% {
                background-color: rgb(255, 2, 204);
                transform: scale(0.9);
            }

            100% {
                background-color: rgb(253, 0, 0);
                transform: scale(1);
            }
        }

        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            animation: ani 20s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3.animation-delay 延迟

在动画里面，让一下元素慢一点执行动画。

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>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: space-evenly;
            align-items: end;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .box .son {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: aqua;
            animation-name: mover;
            animation-duration: 30s;
        }

        .box:nth-child(1) {
            animation-delay: 10s;
        }

        .box:nth-child(2) {
            animation-delay: 10s;
        }

        .box:nth-child(3) {
            animation-delay: 20s;
        }

        @keyframes mover {
            0% {
                background-color: antiquewhite;
                transform: translateY(-200px);
            }

            10% {
                background-color: rgb(255, 145, 1);
                transform: translateY(-150px);
            }

            20% {
                background-color: rgb(156, 253, 0);
                transform: translateY(-100px);
            }

            30% {
                background-color: rgb(0, 255, 85);
                transform: translateY(-50px);
            }

            40% {
                background-color: rgb(0, 217, 255);
                transform: translateY(0px);
            }

            50% {
                background-color: rgb(0, 0, 255);
                transform: translateY(-150px);
            }

            60% {
                background-color: rgb(166, 0, 255);
                transform: translateY(-200px);
            }

            70% {
                background-color: rgb(255, 0, 195);
                transform: translateY(-250px);
            }

            80% {
                background-color: rgb(255, 0, 64);
                transform: translateY(-180px);
            }

            90% {
                background-color: rgb(17, 52, 24);
                transform: translateY(-100px);
            }

            100% {
                background-color: rgb(7, 255, 57);
                transform: translateY(0px);
            }
        }
    </style>
</head>

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

</html>

4.animation-fill-mode 动画执行完毕时状态

属性值：

forwards:动画结束后，状态停止在最后一帧。

backwards：动画结束后，状态固定在第一帧。

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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(400px);
                background-color: aqua;
            }

            10% {
                transform: translateX(410px);
                background-color: aquamarine;
            }

            20% {
                transform: translateX(450px);
                background-color: rgb(0, 94, 255);
            }

            50% {
                transform: translateX(400px);
                background-color: rgb(255, 89, 0);
            }

            70% {
                transform: translateX(200px);
                background-color: rgb(179, 255, 0);
            }

            90% {
                transform: translateX(50px);
                background-color: rgb(0, 255, 64);
            }

            100% {
                transform: translateX(0px);
                background-color: rgb(255, 0, 111);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
            /* 
            forwards:动画结束后，状态停止在最后一帧。
            backwards：动画结束后，状态固定在第一帧。
            */
            animation-fill-mode: backwards;
        }
    </style>
</head>

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

</html>

5.animation-timing-function 速度曲线

steps（数字）：逐帧动画

默认的速度曲线：慢快满

linear：匀速

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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
        }
        .box:nth-child(2) {
            /*linear:匀速*/
            animation-timing-function: linear;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
        }
        .box:nth-child(2) {
            animation-timing-function: linear;
        }

        
        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

6.animation-iteration-count 重复次数

infinite 为无限循环

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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
            /* 重复播放 */
            animation-iteration-count: infinite;
        }

        .box:nth-child(2) {
            animation-timing-function: linear;
        }


        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
    </style>
</head>

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

</html>

7.animation-direction 动画执行方向

alternate：反复

reverse:反向

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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
            /* 重复播放 */
            animation-iteration-count: infinite;
            /* 下一次播放就会反着来 */
            animation-direction: alternate;
        }

        .box:nth-child(2) {
            animation-timing-function: linear;
        }


        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
    </style>
</head>

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

</html>

8.animation-play-state 暂停动画

paused为暂停，通常配合:hover一起使用。

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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            animation-name: move;
            animation-duration:2s ;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .box:hover {
            /* 鼠标经过的时候暂停 */
            animation-play-state: paused;
        }
        @keyframes move {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(300px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意：本文章是笔者的学习笔记，因为笔者的能力有限，会出现很多没有想过的问题，所以，如果您在浏览或者运行代码的时候出现问题，请在评论区留言，笔者看到后会在第一时间处理，谢谢。