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 文件的

    
    
    
    
    
    


    点击我弹跳
    我是一个盒子
    目标元素

    
    

你可以选择使用 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"); 

在这些示例中：

1. $("button").addClass("animated bounce");：这行代码会找到页面中的 元素，并为其添加 animated 和 bounce 两个类。animated 确保了动画环境的正确设置，而 bounce 则定义了具体的弹跳动画效果。
2. $(".well").addClass("animated shake");：类似地，所有类名为 well 的元素将获得 animated 和 shake 类，从而执行摇晃动画。
3. $("#target3").addClass("animated fadeOut");：这里为 ID 为 target3 的元素添加 animated 和 fadeOut 类。fadeOut 是 Animate.css 提供的一种淡出效果，它也需要 animated 类来激活。

重要提示： 尽管在某些特定的 CSS 动画实现中，单个动画类可能独立工作，但对于 Animate.css 而言，animated 类是其所有预设动画（如 bounce、shake、fadeIn、fadeOut 等）得以正确运行的基础。如果缺少 animated 类，这些动画将不会被触发。

工作原理与注意事项

1. CSS @keyframes 驱动： Animate.css 库的本质是大量的 CSS @keyframes 规则。每个具体的动画类（如 bounce）都对应着一个或一组 @keyframes 规则，这些规则定义了动画在不同时间点的样式变化。animated 类则负责将这些 @keyframes 绑定到元素上，并设置动画的默认行为。
2. 动画触发与重复： 默认情况下，Animate.css 的动画只会播放一次。如果需要动画无限循环播放，可以额外添加 infinite 类，例如：element.addClass("animated infinite bounce");。
3. 动画控制：
   • 播放一次： 动画播放完毕后，动画类仍然存在于元素上。如果希望动画在下次触发时重新播放，需要先移除旧的动画类，再重新添加。这可以通过监听 animationend 或 webkitAnimationEnd 事件来实现。
   • JavaScript 控制： 可以使用 JavaScript 动态添加或移除 animated 和动画效果类，以实现更精细的动画控制，例如在用户交互时触发动画。
4. 性能考量： CSS 动画通常由浏览器进行硬件加速，性能表现良好。但过度或复杂的动画仍可能消耗资源，尤其是在低性能设备上。合理使用动画，避免不必要的动画链，有助于保持页面的流畅性。
5. 兼容性： Animate.css 广泛支持现代浏览器。对于需要兼容老旧浏览器的项目，可能需要考虑添加浏览器前缀或使用其他兼容性方案。

总结

animated 类是 Animate.css 动画库不可或缺的一部分，它扮演着激活和配置动画环境的关键角色。通过理解 animated 类的作用，并结合 Animate.css 提供的丰富动画效果类，开发者可以轻松地为网页元素添加各种引人注目的动画，从而提升用户体验和页面的动态感。在实践中，务必记住同时引入 Animate.css 库，并为目标元素同时添加 animated 和具体的动画效果类，以确保动画能够正确无误地呈现。