一篇文章带您学会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>

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

相关推荐
mldong33 分钟前
你的 Vue3 项目也能有钉钉同款审批流设计器：npm 装包，10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排1 小时前
什么是 RAG？如何用 RAG 实现一个用户记忆？
前端·后端·ai编程
passerby60612 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角3 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼！3 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰3 小时前
迷茫焦虑期，我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi5 小时前
Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen5 小时前
面试官问我：AI 都能写代码了，前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马6 小时前
AI源码分析：拆解模型底层实现逻辑
前端
BillKu6 小时前
全局样式变量：CSS 自定义属性（--border-color）和SCSS 变量（$border-color）的说明
javascript·css·scss
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03历年考研数学一、数学二、数学三真题试卷及答案PDF04如何新建文件夹？ 电脑新建文件夹的4种方法05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08ZCode 周末送额度活动开启：3 亿 Token 免费领取09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路