当前位置：首页 > 文章列表 > 文章 > 前端 > Animate.css动画教程：网页动效制作技巧

Animate.css动画教程：网页动效制作技巧

2025-10-19 18:45:36 0浏览收藏

Animate.css 动画库是网页动效设计的利器，而 `animated` 类则是其核心所在。本文深入解析 `animated` 类在 Animate.css 中的作用，它并非 Bootstrap 或 jQuery 原生，而是初始化元素以支持 CSS 动画效果的关键。通过结合具体的动画类，如 `bounce`、`shake`，`animated` 类能轻松为网页元素添加预设动画，提升用户体验。文章还将详细介绍 Animate.css 的引入方法，`animated` 类的基本用法，以及动画持续时间、延迟、重复播放等高级技巧，助你掌握网页动效核心技术，打造更具吸引力的用户界面。掌握 `animated` 类，玩转 Animate.css，让你的网页动起来！

Animate.css中的animated类：实现网页动画的基石

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
    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 等。例如：
重复播放动画： 如果想让动画重复播放，最常见的方法是在动画结束后移除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并有效利用其强大功能的关键一步。

以上就是《Animate.css动画教程：网页动效制作技巧》的详细内容，更多关于的资料请关注golang学习网公众号！