animated类并非bootstrap或jquery原生，而是animate.css动画库的核心组成部分。它用于初始化元素以支持css动画效果。结合具体的动画类（如bounce、shake），animated类能轻松为网页元素添加丰富的预设动画，是实现动态用户体验的关键。
Animate.css与animated类概述
在网页开发中，为元素添加动态效果是提升用户体验的重要手段。许多开发者在尝试使用CSS动画时，可能会遇到类似疑问：某些动画效果为何必须依赖一个名为animated的类才能生效？这个animated类究竟扮演了什么角色？
实际上，animated类并非Bootstrap或jQuery等常用前端框架的内置功能，它来源于一个广受欢迎的CSS动画库——Animate.css。Animate.css提供了一系列预设的、跨浏览器兼容的CSS3动画效果，开发者只需通过添加特定的CSS类即可快速实现各种动画。而animated类正是Animate.css库的核心组成部分，它负责为元素设置动画所需的基础CSS属性，例如animation-duration、animation-fill-mode等，确保后续添加的具体动画类（如bounce、shake、fadeOut）能够正确地被浏览器解析和执行。简而言之，没有animated类，Animate.css提供的具体动画类将无法正常工作。
Animate.css库的引入
要使用Animate.css提供的动画效果，首先需要在项目中引入该库。通常有两种主要方式：
-
通过CDN引入： 这是最快捷的方式，只需在HTML文件的<head>标签内添加以下<link>标签：
立即学习“前端免费学习笔记（深入）”；
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> -
本地引入： 下载Animate.css文件（通常是animate.min.css），并将其放置在项目目录中，然后通过相对路径引入：
<head> <link rel="stylesheet" href="path/to/your/css/animate.min.css" /> </head>
animated类的基本用法
一旦Animate.css库被成功引入，就可以开始使用animated类与具体的动画类结合，为元素添加动画效果。
animated类通常需要与一个或多个具体的动画类（例如animate__bounce、animate__shake、animate__fadeOut等，Animate.css v4+版本前缀为animate__，旧版本直接是bounce等）一同使用。它的作用是为元素提供动画的通用配置，而具体的动画类则定义了动画的形态和关键帧。
示例代码：
以下代码演示了如何为不同的HTML元素添加Animate.css动画：
<!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: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 50px;
}
.box {
width: 150px;
height: 100px;
background-color: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<h1 class="animate__animated animate__fadeInDown">Animate.css 动画演示</h1>
<div id="target1" class="box">静态弹跳</div>
<div id="target2" class="box">点击摇动</div>
<button id="shakeButton">摇动方块</button>
<div id="target3" class="box">点击淡出</div>
<button id="fadeOutButton">淡出方块</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 静态添加动画，页面加载时即执行
// 注意：Animate.css v4+ 版本动画类前缀为 `animate__`
$("#target1").addClass("animate__animated animate__bounce");
// 动态添加动画，通过点击按钮触发
$("#shakeButton").on("click", function () {
// 移除旧的动画类以允许重复播放
$("#target2")
.removeClass("animate__shake")
.addClass("animate__animated animate__shake");
// 监听动画结束事件，动画结束后移除动画类，以便下次点击时能再次触发
$("#target2").one(
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function () {
$(this).removeClass("animate__animated animate__shake");
}
);
});
$("#fadeOutButton").on("click", function () {
$("#target3")
.removeClass("animate__fadeOut")
.addClass("animate__animated animate__fadeOut");
$("#target3").one(
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function () {
// 动画结束后可以隐藏或移除元素
$(this).hide();
}
);
});
});
</script>
</body>
</html>在上述示例中：
- h1元素在页面加载时会执行fadeInDown动画，因为它的类列表中包含了animate__animated和animate__fadeInDown。
- #target1元素同样在页面加载时执行bounce动画。
- #target2和#target3元素通过JavaScript动态添加animate__animated和具体的动画类（animate__shake或animate__fadeOut），从而在按钮点击时触发动画。
高级用法与注意事项
-
动画持续时间与延迟： Animate.css提供了一些辅助类来控制动画的持续时间和延迟：
- animate__slow (2s), animate__slower (3s)
- animate__fast (800ms), animate__faster (500ms)
- animate__delay-1s, animate__delay-2s 等。 例如：<div class="animate__animated animate__bounce animate__delay-1s"></div>
重复播放动画： 如果想让动画重复播放，最常见的方法是在动画结束后移除animate__animated和具体的动画类，然后在需要时重新添加。通过监听animationend事件可以实现这一点。
动画结束事件： 浏览器提供animationend事件，可以在CSS动画完成后触发。这对于执行后续的JavaScript操作（如移除动画类、隐藏元素等）非常有用。由于浏览器兼容性，通常会监听多个带前缀的事件，或者使用jQuery的one()方法简化处理。
性能考量： 尽管Animate.css使用了硬件加速的CSS属性，但过度或不恰当的动画仍可能影响页面性能。建议适度使用，并关注动画在不同设备上的表现。
与其他框架的关系： 再次强调，animated类及其相关的动画类是Animate.css库的特性，与Bootstrap、jQuery等框架是独立的。它们可以协同工作，但彼此并非依赖关系。开发者在项目中引入Animate.css后，即可在任何HTML元素上使用这些动画类。
总结
animated类是Animate.css动画库的基石，它为元素准备了进行CSS动画所需的基础环境。没有它，Animate.css提供的各种精彩动画效果将无法呈现。通过简单地引入Animate.css库，并结合animated类和具体的动画类，开发者可以高效、便捷地为网页元素添加丰富的动态效果，极大地提升用户界面的吸引力和互动性。理解animated类的作用，是掌握Animate.css并有效利用其强大功能的关键一步。
