当前位置：首页 > news >正文

animate.css详解：轻松实现网页动画效果

news 2025/6/10 9:33:01

前言

在网页设计中，动画效果不仅仅是视觉上的装饰，更是提升用户体验的重要元素。animate.css 作为一个轻量级的 CSS 动画库，提供了丰富的预设动画效果，本文将探讨 animate.css 使用方法以及在实际项目中的应用案例，帮助你更好地掌握这一强大的工具，让你的页面更具个性。

animate.css 是什么？

animate.css 是一个用于实现 CSS 动画效果的库，它提供了一系列预定义的动画类，可以轻松地将动画效果应用到网页元素上。这个库的主要优点是简单易用，开发者只需在 HTML 元素中添加相应的类名，就能实现各种炫酷的动画效果，而无需编写复杂的 CSS 代码。

一、安装

使用 npm 安装
```
npm install animate.css --save
```
使用 yarn 安装
```
yarn add animate.css
```

二、引入

全局引入

import Vue from 'vue';
import 'animate.css';

局部引入
```
import 'animate.css';
```

三、使用

注意： 在使用 animate.css 时，必须将类 animate__animated 添加到元素，以及任何动画名称（不要忘记 animate__ 前缀！）。

animate__animated 类在 animate.css 中起着核心的初始化作用。它为元素启用了动画相关的基础样式与关键的 CSS 属性，为后续具体动画的呈现奠定基础。若缺少 animate__animated 类，即便添加了具体动画类名，如 animate__fadeIn，动画也无法生效。

而 animate__ 前缀对于具体动画类名同样不可或缺。animate.css 通过这样统一的前缀约定，将自身的动画类名与项目中可能存在的其他 CSS 类名区分开来，避免命名冲突。同时，这种规范的命名方式也方便开发者识别和管理动画相关样式。若去掉 animate__ 前缀，animate.css 将无法识别并应用对应的动画效果。

3.1 基础使用

需要添加动画的元素添加 animate__animated 类以及你想要的具体动画类。例如，使用 animate__bounce 动画效果就是： class="animate__animated animate__bounce"。

<template><div class="animation"><el-button type="primary" @click="isShow = true">点击</el-button><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div><div v-if="isShow" class="animate__animated animate__flash">Animate.css</div><div v-if="isShow" class="animate__animated animate__pulse">Animate.css</div><div v-if="isShow" class="animate__animated animate__rubberBand">Animate.css</div><div v-if="isShow" class="animate__animated animate__shakeX">Animate.css</div><div v-if="isShow" class="animate__animated animate__shakeY">Animate.css</div><div v-if="isShow" class="animate__animated animate__headShake">Animate.css</div><div v-if="isShow" class="animate__animated animate__swing">Animate.css</div><div v-if="isShow" class="animate__animated animate__tada">Animate.css</div><div v-if="isShow" class="animate__animated animate__wobble">Animate.css</div><div v-if="isShow" class="animate__animated animate__jello">Animate.css</div><div v-if="isShow" class="animate__animated animate__heartBeat">Animate.css</div></div></div>
</template><script>
import "animate.css";
export default {data() {return {isShow: false,};},
};
</script><style scoped>
.animation {padding: 16px;
}
.content {display: flex;
}
div {font-weight: bold;color: cornflowerblue;margin: 20px 48px 0 0;font-size: 16px;
}
</style>

实现效果

在这里插入图片描述

3.2 自定义动画

–animate-duration

--animate-duration 是 animate.css 中用于自定义动画持续时间的 CSS 变量。通过设置这个属性，可以灵活地调整动画的速度，以适应不同的设计需求。

<template><div><el-button type="primary" @click="isShow = true">点击</el-button><div class="animation"><div class="content contentOne"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div></div></div>
</template><script>
import "animate.css";
export default {data() {return {isShow: false,};},
};
</script>
<style scoped>
.animation {display: flex;
}
div {font-weight: bold;color: cornflowerblue;margin: 20px 48px 0 0;font-size: 16px;
}
.contentOne .animate__bounce {--animate-duration: 3s; /* 持续时间改为3秒 */
}
</style>

实现效果
在这里插入图片描述

animate-delay

animate-delay 是 animate.css 中用于设置动画延迟时间的 CSS 属性。通过这个属性，可以控制动画开始前的等待时间，从而实现更复杂的动画效果。

行内定义

<div class="animation"><div class="content"><!-- animate__delay-1s 设置延迟时间为1秒 --><div v-if="isShow" class="animate__animated animate__bounce animate__delay-1s">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div>
</div>

style 中定义

<style scoped>
.animate__bounce {animation-delay: 1s; /* 设置延迟时间为1秒 */
}
</style>

实现效果
在这里插入图片描述

3.3 动画迭代次数

animate__repeat- 是 animate.css 库提供的一个类，用于控制动画的重复次数，例如 animate__repeat-2 可以让动画重复播放 2 次。你可以将这个类名和其他动画类名一起添加到元素的 class 属性中。

<div class="animation"><div class="content"><!-- animate__repeat-2 动画循环2次 --><div v-if="isShow" class="animate__animated animate__bounce animate__repeat-2">Animate.css</div></div><div class="content"><div v-if="isShow" class="animate__animated animate__bounce">Animate.css</div></div>
</div>

实现效果
在这里插入图片描述

3.4 使用 @keyframes

这段代码实现了一个简单的交互界面，包含一个按钮和一个盒子。初始时盒子是隐藏的，点击按钮后盒子显示，并带有动画效果。代码中结合使用了 animate.css 库和自定义的 @keyframes 动画。

<template><div id="app"><button @click="showBox = true">显示盒子</button><div v-if="showBox" class="custom-box animate__animated"></div></div>
</template><script>
import "animate.css";
export default {data() {return {showBox: false,};},
};
</script><style scoped>
#app {display: flex;flex-direction: column;align-items: center;justify-content: center;
}button {padding: 10px 20px;font-size: 16px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;
}
/* 使用 @keyframes 定义自定义动画 */
@keyframes customFadeIn {0% {opacity: 0;transform: scale(0.8);}100% {opacity: 1;transform: scale(1);}
}.custom-box {width: 200px;height: 200px;background-color: #28a745;margin-top: 20px;border-radius: 8px;animation: customFadeIn 0.5s;
}
</style>

实现效果

Animate.css

3.5 与 Javascript 结合使用

模板部分

包含标题、任务输入框与添加按钮，输入框支持回车添加。
用 v-for 遍历任务数组展示任务列表，每个任务后有删除按钮。
脚本部分

数据有 newTask（输入内容）、tasks（任务列表）、nextTaskId（生成唯一 ID）。
addTask 方法：输入非空时添加任务，清空输入框，DOM 更新后添加淡入向下动画，结束后移除动画类。
removeTask 方法：触发淡出向上动画，动画结束后从数组移除任务。
样式部分

为容器、输入框、按钮、任务项等设置样式，添加了交互效果，如按钮悬停时的样式变化。

<template><div class="cartoon"><h1>任务列表</h1><div class="task-form"><input v-model="newTask" placeholder="输入任务内容" @keyup.enter="addTask" /><button @click="addTask">添加任务</button></div><div class="task-list"><div v-for="(task, index) in tasks" :key="task.id" :ref="`task-${task.id}`" class="task-item"><span class="task-text">{{ task.text }}</span><button @click="removeTask(index)">删除</button></div></div></div>
</template><script>
import "animate.css";
export default {data() {return {newTask: "", // 输入框的内容tasks: [], // 任务列表nextTaskId: 1, // 用于生成唯一 ID};},methods: {// 添加任务addTask() {if (this.newTask.trim() === "") return; // 防止空内容const newTask = {id: this.nextTaskId++,text: this.newTask.trim(),};this.tasks.push(newTask);this.newTask = ""; // 清空输入框// 触发添加动画this.$nextTick(() => {const taskElement = this.$refs[`task-${newTask.id}`][0];taskElement.classList.add("animate__animated", "animate__fadeInDown");taskElement.addEventListener("animationend", () => {taskElement.classList.remove("animate__animated", "animate__fadeInDown");});});},// 删除任务removeTask(index) {const task = this.tasks[index];// 触发删除动画const taskElement = this.$refs[`task-${task.id}`][0];taskElement.classList.add("animate__animated", "animate__fadeOutUp");taskElement.addEventListener("animationend", () => {this.tasks.splice(index, 1); // 动画结束后移除任务});},},
};
</script><style scoped>
.cartoon {margin: 20px;padding: 20px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}h1 {text-align: center;
}.task-form {display: flex;gap: 10px;margin: 20px 0;
}.task-form input {flex: 1;padding: 12px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 8px;font-size: 16px;outline: none;background: rgba(255, 255, 255, 0.9);transition: all 0.3s ease;
}
.task-form input:focus {border-color: #42b983;box-shadow: 0 0 8px rgba(66, 185, 131, 0.3);
}
.task-form button {padding: 12px 20px;background: linear-gradient(135deg, #42b983, #3aa876);color: white;border: none;border-radius: 8px;cursor: pointer;font-size: 16px;display: flex;align-items: center;gap: 8px;transition: all 0.3s ease;
}
.task-form button:hover {background: linear-gradient(135deg, #3aa876, #42b983);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}.task-item {padding: 10px;margin-bottom: 10px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;
}.task-item button {background-color: #ff4d4d;color: white;border: none;padding: 5px 10px;border-radius: 5px;cursor: pointer;
}.task-item button:hover {background-color: #ff1a1a;
}.task-text {margin-right: 16px;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>