本文旨在解析网页开发中常见的 `animated` 类，阐明其并非 bootstrap 或 jquery 的原生组成部分，而是 animate.css 这一流行 css 动画库的核心激活类。通过引入 animate.css，开发者可以轻松为 html 元素添加如弹跳、抖动、淡出等丰富的预设动画效果，显著提升用户体验。
在前端开发实践中，我们经常会遇到需要为网页元素添加动态效果的场景。其中，animated 类是一个经常被用于触发动画效果的 CSS 类。初学者可能会疑惑它是否属于 Bootstrap 或 jQuery 的内置功能。事实上，animated 类是 Animate.css 动画库的关键组成部分。它本身并不定义具体的动画行为，而是作为一个“开关”，告诉浏览器这个元素将要应用一个 Animate.css 提供的动画。
Animate.css 简介
Animate.css 是一个广受欢迎的、跨浏览器的 CSS 动画库，它提供了一系列预设的、高质量的动画效果，可以轻松地应用于任何 HTML 元素。通过简单地添加相应的 CSS 类，开发者无需编写复杂的关键帧动画代码，即可实现各种引人注目的视觉效果，例如进入/退出动画、强调动画等。它的设计目标是简化动画实现过程，让开发者能够专注于内容和交互逻辑。
如何使用 Animate.css
要使用 Animate.css 库，首先需要将其引入到您的项目中。这通常有两种方式：
-
通过 CDN 引入： 这是最快捷的方式，只需在 HTML 文件的 <head> 部分添加以下 <link> 标签：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
-
本地安装： 您也可以通过 npm 或 yarn 安装 Animate.css，然后将其编译到您的项目中：
npm install animate.css --save # 或者 yarn add animate.css
然后在您的 CSS 或 JS 文件中引入（适用于现代前端构建工具）：
立即学习“前端免费学习笔记（深入）”；
import 'animate.css'; // 对于使用 Webpack, Vite 等模块系统的项目
引入库后，应用动画就变得非常简单。您需要为目标元素同时添加 animated 类和具体的动画效果类。例如，要让一个按钮弹跳，一个区域抖动，或一个元素淡出，可以这样做：
<button class="my-button">点击我</button> <div class="my-well">内容区域</div> <div id="target3">目标元素</div>
通过 JavaScript (例如 jQuery) 动态添加类：
$(document).ready(function() {
// 让按钮弹跳
$("button.my-button").addClass("animated bounce");
// 让区域抖动
$(".my-well").addClass("animated shake");
// 让目标元素淡出
$("#target3").addClass("animated fadeOut"); // 建议始终添加 "animated" 类
});重要提示： 在 Animate.css v4 及更高版本中，一些简单的动画效果可能不再强制要求 animated 类。然而，为了确保所有动画的正确触发和兼容性，特别是在动态添加动画时，建议始终将其与具体的动画类一同使用。animated 类负责设置一些基础的动画属性，如 animation-duration、animation-fill-mode 等。
常用动画类示例
Animate.css 提供了数百种动画效果，它们被组织成不同的类别。一些常见的动画类包括：
- 强调效果 (Attention Seekers): bounce (弹跳), flash (闪烁), pulse (脉冲), shakeX (水平抖动), tada (哒哒) 等。
- 进入效果 (Bouncing/Fading/Sliding Entrances): bounceIn (弹入), fadeIn (淡入), slideInLeft (从左滑入) 等。
- 退出效果 (Bouncing/Fading/Sliding Exits): bounceOut (弹出), fadeOut (淡出), slideOutRight (向右滑出) 等。
您可以在 Animate.css 官方网站 (animate.style) 找到完整的动画列表和演示，以便选择最适合您需求的动画效果。
控制动画行为
Animate.css 也提供了一些辅助类和 CSS 变量来控制动画的持续时间、延迟和重复次数：
- 动画持续时间 (Duration): 默认动画持续时间为 1 秒。您可以通过添加类如 animate__slow (2秒), animate__slower (3秒), animate__fast (0.5秒), animate__faster (0.2秒) 来调整。或者通过设置 CSS 变量 --animate-duration 进行更精确的控制。
- 动画延迟 (Delay): 通过类如 animate__delay-1s (延迟1秒) 或 CSS 变量 --animate-delay 来设置动画开始前的延迟。
- 动画重复次数 (Repeat): 使用 animate__repeat-1 (重复1次), animate__repeat-2 (重复2次) 或 animate__infinite (无限重复) 来控制。
示例：
<div class="animated bounce animate__delay-2s animate__repeat-3">我将延迟2秒后弹跳3次</div>
结合 JavaScript/jQuery 触发动画
在实际应用中，我们经常需要根据用户行为或特定事件来动态触发动画。jQuery 的 addClass() 方法是实现这一点的理想选择：
$(document).ready(function() {
$("#myButton").on("click", function() {
// 每次点击时添加动画类
$(this).addClass("animated heartBeat");
// 动画完成后移除类，以便下次点击时可以再次触发
// Animate.css 动画通常在 animationend 事件触发后结束
$(this).one("animationend", function() {
$(this).removeClass("animated heartBeat");
});
});
});这里的 one("animationend", ...) 是一个关键技巧。animationend 事件在 CSS 动画播放完毕时触发，one() 方法确保事件处理函数只执行一次。通过在动画结束后移除 animated 和具体的动画类，可以允许元素在下次事件触发时再次播放动画。
注意事项与最佳实践
- 性能考量： 尽管 Animate.css 利用了硬件加速的 CSS 属性，但在大量元素上同时播放复杂动画仍可能影响页面性能。建议适度使用动画，并测试在不同设备和浏览器上的表现。
- 可访问性： 动画可能对某些用户（例如患有前庭疾病的用户）造成不适。考虑提供减少动画或禁用动画的选项，尤其是在动画是装饰性而非功能性时。CSS 的 prefers-reduced-motion 媒体查询可以帮助您实现这一点。
- 动画完成检测： 如示例所示，使用 animationend 事件来检测动画何时完成，这对于在动画结束后执行其他操作（如移除类、改变元素状态）至关重要。
- 类管理： 对于一次性动画，务必在动画结束后移除 animated 和具体的动画类。否则，元素将保留动画的最终状态，并且无法再次触发相同的动画效果。
- 兼容性： Animate.css 具有良好的浏览器兼容性，但仍建议在目标浏览器环境中进行测试。
总结
animated 类是 Animate.css 动画库的核心激活器，它使得在网页中实现各种专业级动画变得异常简单。通过引入 Animate.css 库并结合 animated 类和具体的动画效果类，开发者可以显著提升用户界面的动态性和吸引力。理解其工作原理和最佳实践，将帮助您更高效地构建富有活力的现代网页应用。
