Animate.css 动画库中的 animated 类详解与应用-html教程-PHP中文网

Animate.css 动画库中的 animated 类详解与应用

心靈之曲

发布： 2025-10-14 11:11:17

原创

180人浏览过

Animate.css 动画库中的 animated 类详解与应用

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 文件并将其放置在项目本地。

Media.io AI Image Upscaler

Media.io推出的AI图片放大工具

查看详情

应用 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 和具体的动画效果类，以确保动画能够正确无误地呈现。

以上就是Animate.css 动画库中的 animated 类详解与应用的详细内容，更多请关注php中文网其它相关文章！