animated 类并非 bootstrap 或 jquery 的内置功能，而是 animate.css 动画库的核心组成部分。它为元素提供了动画所需的通用 css 属性，是激活 animate.css 中各种预定义动画（如弹跳、摇晃、淡出）的关键。本文将深入解析 animated 类的作用、animate.css 的使用方法，并提供示例代码和最佳实践。
在网页开发中，我们经常需要为元素添加各种生动的动画效果，以提升用户体验。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 实现动画效果非常简单，主要分为两个步骤：引入库文件和应用动画类。
首先，你需要在 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 不仅提供丰富的动画效果，还提供了一些辅助类来控制动画的速度、延迟和重复次数。
例如，让一个元素以慢速无限次弹跳，并延迟 2 秒开始：
<div class="animated animate__infinite animate__slow animate__delay-2s bounce">
无限慢速弹跳
</div>animated 类是 Animate.css 动画库的核心，它为元素提供了执行动画所需的基础 CSS 属性。理解它的作用以及 Animate.css 的使用方法，能够帮助开发者快速、高效地为网页添加各种专业且生动的动画效果。通过结合 JavaScript 动态控制动画的触发和重置，我们可以创建出更加交互和响应式的用户体验。
以上就是理解 animated 类：Animate.css 动画库入门指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
402
收藏
