animated 类并非 bootstrap 或 jquery 的内置功能，而是 animate.css 动画库的核心组成部分。它为元素提供了动画所需的通用 css 属性，是激活 animate.css 中各种预定义动画（如弹跳、摇晃、淡出）的关键。本文将深入解析 animated 类的作用、animate.css 的使用方法，并提供示例代码和最佳实践。
什么是 Animate.css 及其核心 animated 类？
在网页开发中，我们经常需要为元素添加各种生动的动画效果，以提升用户体验。Animate.css 是一个广受欢迎的跨浏览器 CSS 动画库，它提供了一系列即用型的动画类，让开发者无需编写复杂的 CSS 关键帧即可实现丰富的动画效果。
其中，animated 类是 Animate.css 的基石。它的作用是为元素应用一系列基础的 CSS 属性，例如 animation-duration（动画持续时间）、animation-fill-mode（动画结束后元素的样式）、animation-timing-function（动画速度曲线）等。这些属性为后续具体的动画效果（如 bounce、shake、fadeOut）提供了必要的上下文和配置。
如果没有 animated 类，即使你添加了 bounce 或 shake 等具体的动画类，这些动画也不会被触发，因为元素缺乏执行动画所需的底层 CSS 规则。因此，animated 类可以被理解为 Animate.css 动画的“启动器”。
需要明确的是，animated 类既不属于 Bootstrap（一个前端框架，主要关注 UI 组件和响应式布局），也不属于 jQuery（一个 JavaScript 库，主要用于 DOM 操作和事件处理）。它是 Animate.css 这个专门的 CSS 动画库所独有的。
立即学习“前端免费学习笔记（深入）”；
Animate.css 的使用方法
使用 Animate.css 实现动画效果非常简单，主要分为两个步骤：引入库文件和应用动画类。
引入库文件
首先，你需要在 HTML 文件的 <head> 部分引入 Animate.css 的样式表。你可以选择从 CDN（内容分发网络）引入，也可以下载到本地项目中使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate.css 教程示例</title>
<!-- 引入 Animate.css 库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
body { font-family: sans-serif; padding: 20px; }
.example-element {
width: 180px;
height: 90px;
background-color: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
border-radius: 8px;
font-size: 1.2em;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
button {
padding: 10px 25px;
margin: 15px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>Animate.css 动画效果示例</h1>
<div id="elementBounce" class="example-element">弹跳效果</div>
<button id="triggerBounce">触发弹跳</button>
<div id="elementShake" class="example-element">摇晃效果</div>
<button id="triggerShake">触发摇晃</button>
<div id="elementFadeOut" class="example-element">淡出效果</div>
<button id="triggerFadeOut">触发淡出</button>
<!-- 引入 jQuery 库，用于 DOM 操作和事件监听 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 初始加载时应用摇晃效果
$("#elementShake").addClass("animated shake");
// 触发弹跳效果
$("#triggerBounce").on("click", function() {
// 先移除旧的动画类，确保动画能再次触发
$("#elementBounce").removeClass("animated bounce");
// 添加 animated 和 bounce 类
$("#elementBounce").addClass("animated bounce");
// 监听动画结束事件，动画结束后移除动画类，以便可以重复触发
$("#elementBounce").one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$(this).removeClass("animated bounce");
});
});
// 触发摇晃效果
$("#triggerShake").on("click", function() {
$("#elementShake").removeClass("animated shake");
$("#elementShake").addClass("animated shake");
$("#elementShake").one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$(this).removeClass("animated shake");
});
});
// 触发淡出效果
$("#triggerFadeOut").on("click", function() {
$("#elementFadeOut").removeClass("animated fadeOut");
$("#elementFadeOut").addClass("animated fadeOut");
$("#elementFadeOut").one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$(this).removeClass("animated fadeOut");
// 淡出后可以隐藏元素
$(this).css('opacity', '0'); // 或者 $(this).hide();
});
});
});
</script>
</body>
</html>应用动画类
一旦 Animate.css 库被引入，你就可以通过给 HTML 元素添加 CSS 类来应用动画。基本的模式是：animated + [动画名称]。
例如，要让一个按钮弹跳，一个区域摇晃，或者一个元素淡出，你可以这样做：
// 假设你已经引入了 Animate.css 和 jQuery
$(document).ready(function() {
// 给一个按钮添加弹跳动画
$("button").addClass("animated bounce");
// 给一个 class 为 "well" 的元素添加摇晃动画
$(".well").addClass("animated shake");
// 给一个 id 为 "target3" 的元素添加淡出动画
$("#target3").addClass("animated fadeOut");
});在上述代码中，animated 类确保了动画的基础设置，而 bounce、shake 和 fadeOut 则分别定义了具体的动画效果。
动画的触发与控制
通常情况下，我们希望动画在特定事件发生时才触发，而不是页面加载时就执行。这时，结合 JavaScript（如 jQuery）动态添加或移除类就显得尤为重要。
动态触发动画
如上面的示例所示，通过 jQuery 的 addClass() 方法，我们可以在用户点击按钮、鼠标悬停或满足其他条件时，为元素添加 animated 和具体的动画类，从而触发动画。
动画结束后重置与重复触发
Animate.css 的动画默认只会播放一次。如果你希望动画能重复播放，或者在动画结束后执行其他操作，你需要监听 CSS 动画的结束事件 (animationend)。
对于需要重复触发的动画，一个常见的模式是在动画开始前移除旧的动画类，添加新的动画类，并在动画结束后再次移除它们。这确保了每次触发时动画都能从头开始。
$("#myButton").on("click", function() {
// 1. 移除旧的动画类，确保动画可以再次触发
$(this).removeClass("animated bounce");
// 2. 添加 animated 和 bounce 类来触发动画
$(this).addClass("animated bounce");
// 3. 监听动画结束事件，并在结束后移除动画类
$(this).one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$(this).removeClass("animated bounce");
// 动画结束后你可以在这里执行其他操作
console.log("弹跳动画结束！");
});
});one() 方法确保事件监听器只会被触发一次，这对于一次性动画或需要精确控制的动画非常有用。webkitAnimationEnd、oAnimationEnd、MSAnimationEnd 是为了兼容不同浏览器内核的写法。
Animate.css 的进阶用法
Animate.css 不仅提供丰富的动画效果，还提供了一些辅助类来控制动画的速度、延迟和重复次数。
-
动画速度：
- animate__slow：动画速度变慢（3s）
- animate__slower：动画速度更慢（5s）
- animate__fast：动画速度变快（1s）
- animate__faster：动画速度更快（0.5s）
- 默认速度为 1s。
-
动画延迟：
- animate__delay-1s：延迟 1 秒播放
- animate__delay-2s：延迟 2 秒播放
- 以此类推，支持 animate__delay-3s、animate__delay-4s、animate__delay-5s。
-
动画重复次数：
- animate__infinite：动画无限次循环播放。
例如，让一个元素以慢速无限次弹跳，并延迟 2 秒开始：
<div class="animated animate__infinite animate__slow animate__delay-2s bounce">
无限慢速弹跳
</div>注意事项与最佳实践
- 性能考虑： 尽管 Animate.css 经过优化，但过度使用复杂的动画或同时对大量元素应用动画可能会影响页面性能。请适度使用，并测试在不同设备上的表现。
- 可访问性： 对于有运动敏感症的用户，过多的动画可能会引起不适。考虑提供选项让用户禁用动画，或使用 prefers-reduced-motion 媒体查询来调整动画行为。
- 动画冲突： 如果一个元素同时应用了多个动画类，可能会出现冲突或不预期的行为。确保每次只应用一个主要的动画效果。
- 与其他库的兼容性： Animate.css 是纯 CSS 库，与 jQuery、Bootstrap 等 JavaScript 框架或 CSS 框架可以很好地配合使用，通过 JavaScript 动态添加或移除类即可。
总结
animated 类是 Animate.css 动画库的核心，它为元素提供了执行动画所需的基础 CSS 属性。理解它的作用以及 Animate.css 的使用方法，能够帮助开发者快速、高效地为网页添加各种专业且生动的动画效果。通过结合 JavaScript 动态控制动画的触发和重置，我们可以创建出更加交互和响应式的用户体验。
