Logo

菜单

发布于 2026-01-06 9 阅读
0

十大 CSS 动画库

十大 CSS 动画库

长期以来，当开发者想要在网页上显示动画时，他们只能使用 Flash 播放器和 gif 动画。

然而，CSS3 中引入的关键帧、过渡和动画属性使得创建和显示美观的抽象动画变得更加容易。CSS3 的更新不仅允许创建动画，还允许根据不同的伪状态（例如，悬停、聚焦等）有条件地渲染动画。

使用这些属性创建动画非常简单。首先，您需要定义一个keyframes包含所需动画序列的规则：

@keyframes float {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}
Enter fullscreen mode Exit fullscreen mode

您可以看到，我们定义了一个名为 float 的关键帧，在动画流程的 0% 时，将元素的 transform 属性设置为平移 0%，在 50% 时，沿 y 轴平移 15px，在 100% 时，平移回 0%。

然后，我们可以通过 animation 属性将此关键帧流应用到元素上：

.element {
  animation: floating 3s ease-in-out infinite;
}

/* OR */

.element:hover {
  animation: floating 3s ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

你会发现，创建一个简单的浮动动画需要大量的代码，而当动画更复杂时，代码量会更大。动画库通过简化向网页添加动画的过程（只需为相应的元素添加类名），从根本上解决了这个问题。

本文将介绍十个常用的 CSS 动画库和平台，涵盖各种类型的动画，例如简单的动态效果、元素/页面过渡、灯箱动画、加载动画、页面滚动动画等等。我们将探讨它们的优点、局限性以及代码示例，帮助您快速上手。以下是我们将要介绍的库的完整列表：

  • Animate.css
  • 动漫迷
  • 动画库
  • 魔法 CSS
  • 灯光画廊
  • Loading.io
  • 骨架元素
  • 微米
  • AnimXYZ
  • AOS

Animate.css

图片描述

Animate.css 是最流行的 CSS 动画库之一，截至撰写本文时，其在 GitHub 上的 star 数已超过 7.6 万。Animate.css 允许您轻松地为 Web 应用程序添加各种动画效果，只需在要添加动画的元素中包含相应的类名即可。Animate.css 非常适合用于显示页面动画、轮播动画以及其他各种引人注目的动画。

该库还包含一些实用类，允许您直接从标记中调整动画的持续时间、速度和重复播放动画。您还可以将此库提供的动画与原生 CSS 关键帧属性集成，并直接从 CSS 代码中调用它们。

如何使用

Animate.css 可通过npm/yarn包获取，也可通过 CDN 获取：

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
Enter fullscreen mode Exit fullscreen mode

在将 CDN URL 添加到标记的 head 部分后，您就可以开始从其可用动画列表中调用动画，如下所示：

<div class="animate__animated animate__pulse">A pulse animated element</div>
<!-- using utility class  -->
<div class="animate__animated animate__pulse animate__infinite">A pulse animated element</div>
Enter fullscreen mode Exit fullscreen mode

在第一个示例中，我们创建了一个带有脉冲动画的 div 元素，默认情况下动画持续时间为 1 秒；在第二个示例中，我们使用animate__infinite实用类（相当于 CSS 中的 `animate.css` animation-iteration-count: infinite;）将脉冲动画配置为无限循环播放。您可以通过以下链接了解更多关于 Animate.css 的信息。

文档| Github

动漫迷

Animista 与其说是一个库，不如说是一个 CSS 动画平台，因为它提供按需动画，也就是说，你进入平台，选择你想要的动画类型，动画 CSS 关键帧代码就会立即为你生成。

图片描述

表面上看，Animista提供的动画类型与animate.css非常相似，但深入了解后你会发现，Animista提供了更多实用的动画类别，尤其是在文字和背景元素动画方面。此外，导出动画代码时，你可以选择下载标准代码或压缩代码。

如何使用

如前所述，您无需下载任何软件包或在您的网站中包含任何 CDN 即可开始使用 Animista；只需访问其主页，选择您喜欢的动画，根据需要自定义动画序列，代码就会立即为您生成。

这里有一个 GIF 动画演示了这个过程：

图片描述

文档| Github

动画库

图片描述

动画库可以被视为 Animate.css 的替代方案，因为它们都提供类似的动画类别。然而，与 Animate.css 不同的是，动画库不提供额外的自定义选项，例如设置动画的持续时间、速度或时间。

此外，动画库源文件被分为不同的类——例如，淡入淡出动画的所有变体都在一个源文件中，其他动画类也是如此。

如何使用

下载包含所有可用动画类别的ZIP 文件后，您可以选择链接到其中任何一个类别，并在标记中调用其关联的类名。以下是链接rotate.css和使用rotateUpRight样式的示例：

<head>
  <link rel="stylesheet" href="path/to/rotate.css">
</head>

<body>
  <div class="rotateUpRight">
    This div will rotate up right.
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

文档| https://github.com/kaustubhmenon/animation-library[Github](url)

魔法 CSS

图片描述

Magic CSS 是另一个有趣的动画库，它提供的动画效果比我们之前介绍的库更加引人入胜。该库提供的动画非常适合页面过渡效果。然而，Magic CSS 的一个缺点是它不支持 Opera 迷你浏览器。

如何使用

Magic CSS 的使用也非常简单。您可以从 npm/yarn 下载该库，或者直接下载其 CSS 源文件并将其包含在您的网页标记中。之后，您就可以开始调用其动画列表中的各种动画效果了：

<head>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/miniMAC/magic/master/dist/magic.min.css">
</head>

<body>
  <div class="magictime puffIn">
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

文档| Github

灯光画廊

图片描述

lightGallery 与我们之前提到的其他动画库的不同之处在于，它是专门为制作灯箱图像而设计的。灯箱图像（例如上图所示）是一种点击后会在当前网站上方以模态形式叠加显示的图像。

lightGallery 是一个功能全面的库，它支持视频文件，允许以轮播格式渲染媒体资源，并允许用户创建自定义插件来扩展或修改其功能。值得注意的是，lightGallery 并非完全是纯 CSS 动画库，因为它依赖于 JavaScript 才能运行。

如何使用

lightGallery 可通过npm/yarn、bower 获取，也可通过CDN提供服务。要在传统的网页上使用它，您首先需要像下面这样在网页中包含其 CSS 和 JavaScript CDN 链接：

<head>
  <link rel="stylesheet" href="/path/to/lightgallery-bundle.css" />
</head>

<body>
  <!-- . . .  -->
  <script src="/path/to/lightgallery.min.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

接下来，创建一个元素，作为所有要转换为灯箱效果的图像的容器：

<div id="lightbox-container">
  <a data-lg-size="1600-2400">
    <img src="path/to/img" />
  </a>
  <a data-lg-size="1024-800">
    <img src="path/to/img" />
  </a>
</div>
Enter fullscreen mode Exit fullscreen mode

最后，通过之前创建的容器，使用以下脚本初始化 lightGallery：

lightGallery(document.getElementById("lightbox-container"), {
  speed: 500
  //   ...
});
Enter fullscreen mode Exit fullscreen mode

lightGallery 还与其他 JavaScript 框架（如 React、Angular 和 Vue）集成，使得通过组件和属性使用该库变得更加容易。

文档| Github

Loading.io

Loading.io 是一个平台，它提供了丰富的加载动画供您选择，并允许您自定义动画，然后将您的作品导出为 CSS 关键帧动画、GIF、SVG 或 PNG 文件。这些动画对于构建预加载器或展示异步活动的加载状态尤其有用。

图片描述

Loading.io 提供的功能远不止预加载器；该平台还允许您为文本甚至背景图案添加动画效果。他们还提供了一个额外的 loadingBar.js 库，用于直接且交互式地将预加载器集成到网页中。

如何使用

Loading.io 的使用方法与 Animista 类似，无需额外安装任何软件包即可上手。您只需访问他们的网站，选择所需的加载器，根据需要进行自定义，然后导出即可。

文档| GitHub

骨架元素

图片描述

骨架加载器也可以归类为预加载器。然而，它们与典型加载器的区别在于，骨架加载器会模拟将内容加载到灰色块中的结构和外观。它会指示每个块中正在加载的内容类型，例如图像、文本等等。

Skeleton Elements 是一个提供此类功能的流行库，它还可以作为多个 JavaScript 框架的组件使用。

如何使用

骨架元素库可通过npm获取，也可通过 CDN 提供服务。对于简单的网页，您可以像下面这样在标记的 head 部分中包含其CDN ：

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skeleton-elements@3.4.0/skeleton-elements.css" />
</head>
Enter fullscreen mode Exit fullscreen mode

然后，您就可以通过 skeleton-text 和 skeleton-block 类开始创建骨架加载器了：

<body>
  <h3 class="skeleton-text">Placeholder Header</h3>
  <p class="skeleton-text">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block" style="width:30%; height:50px"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

您还可以通过类添加加载效果skeleton-effect-EFFECT_NAME。以下是我们之前的示例，并添加了波浪效果：

<body>
  <h3 class="skeleton-text skeleton-effect-wave">Placeholder Header</h3>
  <p class="skeleton-text skeleton-effect-wave">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block skeleton-effect-wave" style="width:30%; height:50px"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

文档| Github

微米

图片描述

Micron 是一个基于 JavaScript 的微交互库，它使用 CSS 动画创建。简而言之，Micron 允许您轻松地为元素添加多个点击动画。此外，它还提供其他设置选项，帮助您控制动画流程。

此外，您还可以绑定并从其他元素轻松触发动画——例如，您可以让一个按钮元素激活附加到另一个 div 上的动画。

如何使用

要开始使用 Micron，您需要在标记中包含其 CSS 和 Javascript 源文件 CDN，如下所示：

<link href="htps://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>
Enter fullscreen mode Exit fullscreen mode

然后，您可以通过向元素添加属性来使用该库data-micron。以下是如何添加弹跳交互的示例：

<div data-micron="bounce">Click to bounce</div>
Enter fullscreen mode Exit fullscreen mode

文档| Github

Animxyz

图片描述

Animxyz 是另一个易于使用的 CSS 交互动画库，它允许通过属性进行自定义。您可以从各种动画选项中进行选择，并轻松与其他 JavaScript 框架（包括 React 和 Vue）集成。

该库也是用 SCSS 创建的，SCSS 允许变量使用，因此您可以轻松地根据自己的喜好自定义库源代码。

如何使用

您可以使用npm安装此库，导入其核心 SASS mixin，并根据需要进行自定义。或者，您也可以直接将其 CDN 链接包含在 HTML 文件的 head 部分中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">
Enter fullscreen mode Exit fullscreen mode

您可以使用 xyz 属性从其列表中添加动画：

<div class="xyz-in" xyz="fade up big">I will animate in!</div>
Enter fullscreen mode Exit fullscreen mode

文档| GitHub

AOS

Animate on scroll (AOS) 是另一个强大的库，它允许你在滚动页面时为标记元素添加动画效果。该库提供预定义的动画，例如淡入淡出、翻转、缩放等等，并允许你将它们附加到自定义元素上，并在用户滚动浏览时触发。它还包含额外的配置选项，允许你设置动画的持续时间、延迟时间和运行次数。

图片描述

此外，您不仅限于使用库中提供的动画；您还可以附加使用该keyframe属性创建的自己的原生动画。

如何使用

首先，您需要在网页中包含 AOS CSS 和 JavaScript CDN 链接，然后按如下所示初始化库：

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>
Enter fullscreen mode Exit fullscreen mode

现在您可以使用该data-aos属性为滚动时的标记元素添加动画效果：

<div data-aos="fade-up">
  This div will fade up when scrolled to
</div>
Enter fullscreen mode Exit fullscreen mode

文档| Github

结论

虽然在网页上创建基本动画相当简单，但处理复杂的动画却会让人感到疲惫不堪。在本文中，我们介绍了十个提供各种动画功能的 CSS 库，以帮助您避免重复造轮子。

这篇文章由技术撰稿人兼软件开发人员 Elijah 撰写，他热衷于通过写作分享自己的经验。如果您喜欢编程技巧和表情包，请在Twitter上关注我。

文章来源：https://dev.to/coderpad/top-10-css-animation-libraries-656
如何使用流行的 Cypress 框...
我为开源项目搭建了一个顶级的Dis...