animated 类是 animate.css 动画库的核心组成部分，它与特定的动画效果类（如 bounce、shake、fadeout）结合使用，能够为网页元素提供丰富的预设 css 动画。它并非 bootstrap 或 jquery 的原生功能，而是通过引入 animate.css 库来实现动画效果的激活与控制。
揭秘 animated 类：Animate.css 的基石
在网页动画开发中，我们常常会遇到一些看似神奇的 CSS 类，它们能够让元素动起来。其中，animated 类就是一个典型代表。许多初学者可能会疑惑，这个类究竟来自何方，又扮演着怎样的角色？
实际上，animated 类是著名的 Animate.css 动画库的核心组成部分。它本身不定义任何具体的动画效果，而是作为一个基础类（或称“触发类”），为后续应用的具体动画类（如 bounce、shake、fadeIn 等）提供必要的通用属性和环境。这些通用属性通常包括：
- animation-duration: 动画持续时间
- animation-fill-mode: 动画在执行前和执行后如何应用样式
- animation-timing-function: 动画的缓动函数
没有 animated 类，Animate.css 中定义的具体动画效果类将无法正确触发或显示。因此，它是 Animate.css 动画得以生效的先决条件。
引入 Animate.css 动画库
要使用 animated 类及其提供的各种动画效果，首先需要在项目中引入 Animate.css 库。这通常通过在 HTML 文件的 <head> 部分添加一个 <link> 标签来完成：
立即学习“前端免费学习笔记（深入）”；
<!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>
/* 示例样式 */
.well {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
margin: 20px;
font-size: 1em;
cursor: pointer;
}
#target3 {
width: 150px;
height: 80px;
background-color: lightcoral;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button id="animateButton">点击我弹跳</button>
<div class="well">我是一个盒子</div>
<div id="target3">目标元素</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 示例：点击按钮触发动画
$("#animateButton").on("click", function() {
// 先移除可能的旧动画类，再添加新动画类和 animated
$(this).removeClass().addClass("animated bounce");
// 动画结束后移除动画类，以便下次再次触发
$(this).one('animationend webkitAnimationEnd', function() {
$(this).removeClass('animated bounce');
});
});
// 示例：页面加载后自动为元素添加动画
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut"); // 注意：fadeOut也需要animated类
// 监听动画结束事件，以便移除动画类或执行后续操作
$(".well").one('animationend webkitAnimationEnd', function() {
console.log(".well 动画结束");
// $(this).removeClass('animated shake'); // 如果需要动画只播放一次
});
$("#target3").one('animationend webkitAnimationEnd', function() {
console.log("#target3 动画结束");
// $(this).removeClass('animated fadeOut').hide(); // 动画结束后隐藏元素
});
});
</script>
</body>
</html>你可以选择使用 CDN（内容分发网络）链接，如上述示例，也可以下载 Animate.css 文件并将其放置在项目本地。
应用 animated 类与动画效果
一旦 Animate.css 库被成功引入，就可以通过为 HTML 元素添加相应的 CSS 类来应用动画。核心原则是：同时添加 animated 类和具体的动画效果类。
考虑以下示例代码片段：
// 为按钮添加弹跳动画
$("button").addClass("animated bounce");
// 为类名为 "well" 的元素添加摇晃动画
$(".well").addClass("animated shake");
// 为 ID 为 "target3" 的元素添加淡出动画
// 注意：对于 Animate.css 的动画效果，通常都需要 animated 类作为前缀
$("#target3").addClass("animated fadeOut"); 在这些示例中：
- $("button").addClass("animated bounce");：这行代码会找到页面中的 <button> 元素，并为其添加 animated 和 bounce 两个类。animated 确保了动画环境的正确设置，而 bounce 则定义了具体的弹跳动画效果。
- $(".well").addClass("animated shake");：类似地，所有类名为 well 的元素将获得 animated 和 shake 类，从而执行摇晃动画。
- $("#target3").addClass("animated fadeOut");：这里为 ID 为 target3 的元素添加 animated 和 fadeOut 类。fadeOut 是 Animate.css 提供的一种淡出效果，它也需要 animated 类来激活。
重要提示： 尽管在某些特定的 CSS 动画实现中，单个动画类可能独立工作，但对于 Animate.css 而言，animated 类是其所有预设动画（如 bounce、shake、fadeIn、fadeOut 等）得以正确运行的基础。如果缺少 animated 类，这些动画将不会被触发。
工作原理与注意事项
- CSS @keyframes 驱动： Animate.css 库的本质是大量的 CSS @keyframes 规则。每个具体的动画类（如 bounce）都对应着一个或一组 @keyframes 规则，这些规则定义了动画在不同时间点的样式变化。animated 类则负责将这些 @keyframes 绑定到元素上，并设置动画的默认行为。
- 动画触发与重复： 默认情况下，Animate.css 的动画只会播放一次。如果需要动画无限循环播放，可以额外添加 infinite 类，例如：element.addClass("animated infinite bounce");。
-
动画控制：
- 播放一次： 动画播放完毕后，动画类仍然存在于元素上。如果希望动画在下次触发时重新播放，需要先移除旧的动画类，再重新添加。这可以通过监听 animationend 或 webkitAnimationEnd 事件来实现。
- JavaScript 控制： 可以使用 JavaScript 动态添加或移除 animated 和动画效果类，以实现更精细的动画控制，例如在用户交互时触发动画。
- 性能考量： CSS 动画通常由浏览器进行硬件加速，性能表现良好。但过度或复杂的动画仍可能消耗资源，尤其是在低性能设备上。合理使用动画，避免不必要的动画链，有助于保持页面的流畅性。
- 兼容性： Animate.css 广泛支持现代浏览器。对于需要兼容老旧浏览器的项目，可能需要考虑添加浏览器前缀或使用其他兼容性方案。
总结
animated 类是 Animate.css 动画库不可或缺的一部分，它扮演着激活和配置动画环境的关键角色。通过理解 animated 类的作用，并结合 Animate.css 提供的丰富动画效果类，开发者可以轻松地为网页元素添加各种引人注目的动画，从而提升用户体验和页面的动态感。在实践中，务必记住同时引入 Animate.css 库，并为目标元素同时添加 animated 和具体的动画效果类，以确保动画能够正确无误地呈现。
