【愚公系列】《循序渐进Vue.js 3.x前端开发实践》038-使用CSS3创建动画（keyframes动画）
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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 动画来实现灵活的用户界面效果。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）