【愚公系列】《循序渐进Vue.js 3.x前端开发实践》038-使用CSS3创建动画（keyframes动画）

愚公搬代码

发布于 2025-06-02 17:46:11

10400

代码可运行

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在网页设计中，动画不仅能吸引用户的注意力，还能有效提升用户体验，使得界面更加生动和互动。随着 CSS3 的发展，开发者们可以轻松地通过 CSS 动画为网页增添动感效果。其中，@keyframes 动画是实现复杂动画效果的强大工具，允许我们定义动画的不同阶段，以及这些阶段之间的过渡效果。

本篇文章将深入探讨如何使用 CSS3 的 @keyframes 创建动画。我们将介绍如何定义动画的关键帧、设置动画的持续时间、延迟、播放次数等属性，并通过实际示例展示如何将这些动画效果应用到网页元素上。无论是简单的平移动画、旋转效果，还是更复杂的多阶段动画，@keyframes 都能助你一臂之力。

🚀一、使用CSS3创建动画（keyframes动画）

🔎1. 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">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>关键帧动画</title>
</head>
<body>
    <style>
        /* CSS 样式代码 */
    </style>
    <div id="Application">  
        <div :class="cls" @click="run"> </div>   
    </div>
    <script>
        /* Vue 代码 */
    </script>
</body>
</html>

🔎2. CSS 部分

🦋2.1 `@keyframes` 动画定义

@keyframes animation1 {
    0% {
        background-color: red;
        width: 100px;
        height: 100px;
    }
    25% {
        background-color: orchid;
        width: 200px;
        height: 200px;
    }
    75% {
        background-color: green;
        width: 150px;
        height: 150px;
    }
    100% {
        background-color: blue;
        width: 200px;
        height: 200px;
    }
}

@keyframes 定义了一个名为 animation1 的动画，它描述了在不同的时间点（0%, 25%, 75%, 100%）元素的变化。
- 0%：初始状态，元素的背景颜色是红色，宽高是 100px × 100px。
- 25%：25% 的时候，背景颜色变成了 orchid（一种花卉的紫色），宽高变成了 200px × 200px。
- 75%：75% 的时候，背景颜色变成绿色，宽高变成 150px × 150px。
- 100%：最终状态，背景颜色变为蓝色，宽高恢复为 200px × 200px。

这个动画的核心是通过 @keyframes 来描述不同时间点元素的状态，从而实现过渡效果。

🦋2.2 `demo` 类

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
}

demo 类定义了初始的样式，元素的宽度和高度都是 100px，背景颜色为红色。

🦋2.3 `demo-ani` 类

.demo-ani {
    /* 设置关键帧动画名称 */
    animation-name: animation1;
    /* 设置动画时长 */
    animation-duration: 3s;
    /* 设置动画播放方式：渐入渐出 */
    animation-timing-function: ease-in-out;
    /* 设置动画播放的方向 */
    animation-direction: alternate;
    /* 设置动画播放的次数 */
    animation-iteration-count: infinite;
    /* 设置动画的播放状态 */
    animation-play-state: running;
    /* 设置播放动画的延迟时间 */
    animation-delay: 1s;
    /* 设置动画播放结束应用到元素的样式 */
    animation-fill-mode: forwards;
    background-color: red;
    width: 100px;
    height: 100px;
}

animation-name: animation1：设置元素的动画为之前定义的 animation1，即上面定义的 @keyframes 动画。
animation-duration: 3s：设置动画的总时长为 3 秒。
animation-timing-function: ease-in-out：设置动画的时间函数为 ease-in-out，意味着动画开始和结束时会有缓慢的过渡。
animation-direction: alternate：使动画在完成一个周期后反向播放，即先从 0% 到 100%，再从 100% 到 0%，不断交替。
animation-iteration-count: infinite：设置动画无限循环播放。
animation-play-state: running：设置动画的播放状态为运行。
animation-delay: 1s：设置动画在 1 秒后开始播放。
animation-fill-mode: forwards：设置动画完成后元素会保持动画结束时的状态。

🔎3. Vue 部分

const App = Vue.createApp({
    data() {
        return {
            cls: "demo"  // 初始类名为 "demo"
        };
    },
    methods: {
        run() {
            if (this.cls == "demo") {
                this.cls = "demo-ani"; // 如果当前是 "demo"，点击时切换到 "demo-ani"
            } else {
                this.cls = "demo"; // 如果当前是 "demo-ani"，点击时切换回 "demo"
            }
        }
    }
});

App.mount("#Application");

data()：data 返回一个对象，其中有一个属性 cls，初始值是 "demo"，即 div 元素开始时使用 demo 类。
methods：定义了一个 run 方法，功能是切换 cls 的值：
- 如果当前 cls 是 demo，则将其切换为 demo-ani，从而触发 CSS 动画。
- 如果当前 cls 是 demo-ani，则将其切换回 demo，使动画停止。
这个方法通过 Vue 的响应式系统使得 div 元素的类名发生变化，从而触发元素的样式和动画效果。
App.mount("#Application")：将 Vue 应用挂载到页面中 id 为 Application 的元素上。

🔎4. 交互流程

初始状态：
- 页面加载时，div 元素的 class 被设置为 "demo"，即该元素的初始状态是 100px × 100px 的红色方块。
- 此时，CSS 动画不会启动，因为元素的类名是 demo，没有应用任何动画。
点击事件：
- 当用户点击 div 元素时，run 方法被调用。此时，cls 的值从 "demo" 切换到 "demo-ani"，意味着元素的类名发生了变化。
- 切换到 demo-ani 后，div 元素会开始应用 demo-ani 类中的关键帧动画（@keyframes animation1），使得元素从红色变为紫色、绿色、蓝色，大小也发生变化，动画持续 3 秒，并且每次动画完成后会反向播放。
动画效果：
- 由于 animation-direction 设置为 alternate，动画会在每次播放完毕后反向执行，即先从 0% 到 100%，再从 100% 到 0%，这使得动画不断循环。
- animation-iteration-count: infinite 保证动画会无限次播放。
- animation-fill-mode: forwards 确保动画结束后，元素保持动画结束时的状态。
切换回初始状态：
- 如果点击时 cls 已经是 demo-ani，则它会切换回 demo 类，动画会停止，元素恢复到初始状态（100px × 100px 的红色方块）。

🔎5. 总结

这段代码通过 Vue 3 和 CSS 关键帧动画实现了一个动态的交互效果：

使用 @keyframes 定义了一个复杂的动画，控制元素的颜色和大小变化。
Vue 负责在用户点击时切换 div 的类名，通过响应式绑定触发 CSS 动画。
通过 animation-direction: alternate 和 animation-iteration-count: infinite 让动画不断循环并反向播放。

这是一种非常适合学习 CSS 动画与 Vue 的交互方式的示例，展示了如何结合 Vue 的数据绑定和 CSS 动画来实现灵活的用户界面效果。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

css3