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

与风过山岗2024-04-28 0:05

动画和过渡的区别

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

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

动画的实现步骤

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>

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

相关推荐
Tiffany_Ho22 分钟前
【TypeScript】知识点梳理（三）
前端·typescript
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ1 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记2 小时前
【复习】HTML常用标签＜table＞
前端·html
丁总学Java3 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele3 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀3 小时前
CSS——属性值计算
前端·css
DOKE3 小时前
VSCode终端：提升命令行使用体验
前端
xgq3 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑