在本文中，我将向您展示我迄今为止发现/遇到的 10 个最佳 CSS 动画库。
我总共试用了大约 30 个库，其中大部分比较小，也有一些比较大，但最终，我发现这 10 个是最好的。
请注意，这些都是不需要 JavaScript就能运行的库。
其实我最近才发现这个网站，但我立刻就爱上了它。说实话，它值得单独写一篇文章。
Animista 是一款集在线动画生成器和动画库于一体的工具，它为您提供以下功能：
您可以选择您想要的动画类型（如入场/退场），此外，您还可以选择某个特定的动画（例如scale-in：），甚至还可以为该动画选择不同的变体（例如scale-in-right：）。
Animista 还提供了一项功能，允许您自定义动画的某些部分，例如：
更棒的是，你可以选择要制作动画的对象，
它可以是：
选择好符合您需求的动画后，您可以直接从网站获取代码。
您甚至可以选择压缩代码。
另一个很棒的功能是，你可以点赞某个动画，把它添加到你的收藏夹里，然后就可以只下载你点赞过的动画的代码。或者，你也可以选择一次性复制所有点赞过的动画的代码。 但这个网站更棒的地方在于它是完全响应式的，也就是说，即使你现在用的是手机，也可以去体验一下。
当然，我还要提一下 Animate CSS，它可能是最知名的动画库之一。
我会简要介绍一下它的使用方法。
你需要给animated任何想要添加动画效果的元素添加类名，然后再添加动画名称。
例如：
<div class="animated slideInLeft"></div>
如果你希望动画保持一致，可以添加infinite该类，这样动画就会不停地重复播放。
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
$(".my-element").addClass("animated slideInLeft")
Animate CSS 提供了一些基本类，可以用来控制动画的延迟和速度。
你可以使用delay类为动画添加延迟。
<div class="animated slideInLeft delay-{1-5}"><div>
您还可以通过添加所列类之一来控制动画速度。
| 类名 | 速度时间 |
|---|---|
| 慢的 | 2秒 |
| 慢点 | 3秒 |
| 快速地 | 800毫秒 |
| 快点 | 500毫秒 |
<div class="animated slideInLeft slow|slower|fast|faster"><div>
animate-css / animate.css
使用 npm 安装：
npm install animate.css --save
使用 yarn 安装：
yarn add animate.css
您可以在网站上找到 Animate.css 的文档。
Animate.css 支持prefers-reduced-motion媒体查询，因此对动态效果敏感的用户可以选择关闭动画。在支持的平台（目前涵盖所有主流浏览器和操作系统）上，用户可以在操作系统设置中选择“减少动态效果”，系统会自动关闭 CSS 过渡效果，无需任何其他操作。
Animate.css 采用希波克拉底许可证授权。
本项目及其所有参与者均受《贡献者公约行为准则》约束。参与本项目即表示您同意遵守此准则……
Vivify 是一个动画库，我一直认为它是 Animate CSS 的增强版。它的工作方式完全相同，拥有 Animate CSS 的大部分类，但还扩展了一些其他类。animated你不是给元素添加类，而是添加 `<div class="Animate CSS">` vivify。例如：
<div class="vivify slideInLeft"></div>
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
$(".my-element").addClass("vivify slideInLeft")
与 Animate CSS 类似，Vivify 也提供了一些类来控制动画的持续时间和延迟。
延迟和持续时间类均有以下几种设置范围：
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
请注意，这些值以毫秒为单位。1000毫秒=1秒
Vivify 是一个免费的 CSS 动画库。
只需将 vivify css 文件包含到您的文档中即可。<head>
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>
vivify给想要添加动画效果的元素添加类。如果想要动画无限循环，也可以添加infinite相应的类。
如果您想快速更改延迟或持续时间，您可以……
这个动画库里有一些非常精美流畅的动画，我尤其喜欢其中的3D动画。
没什么好说的了，你自己去试试吧，玩玩这些动画。
你可以在这里magictime {animation_name}为你的元素增添色彩。
<div class="magictime fadeIn"></div>
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
$(".my-element").addClass("magictime fadeIn")
带有特效的 CSS3 动画。（压缩后大小为 3.1 kB）
点击此处查看动画演示。
GitHub 包注册表-包 URL
npm install @minimac/magic.css
NPM -包网址
npm i magic.css
YARN -包 URL
yarn add magic.css
请引入文件magic.css或引入其压缩版本magic.min.css。
<link rel="stylesheet" href="yourpath/magic.css">
或者
<link rel="stylesheet" href="yourpath/magic.min.css">
这是一个使用JavaScript实现鼠标悬停效果的示例代码。首先，引入类magictime，然后引入所需的动画类。
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
如果你……
cssanimation.io 汇集了大量不同的动画，总共可能有大约 200 种，非常丰富。
如果你在这里找不到需要的动画，那你就真的找不到其他地方了。
它的工作原理与 Animista 类似。例如，您可以选择一个动画并直接从网站获取代码，或者也可以下载整个动画库。使用方法
添加cssanimation {animation_name}到您的元素中。
<div class="cssanimation fadeIn"></div>
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
$(".my-element").addClass("cssanimation fadeIn")
你还可以添加infinite类名，这样动画就会不断重复播放。
<div class="cssanimation fadeIn infinite"></div>
此外，cssanimation.io 还提供了将字母转换为动漫字体的功能。
为此，您需要像往常一样letteranimation.js将文件包含在head标签中，然后将其添加le{animation_name}到您的文本元素中。
<div class="cssanimation leSnake"></div>
要按顺序播放字母动画，请添加sequence类；要随机播放字母动画，请添加random类。
<div class="cssanimation leSnake {sequence|random}"></div>
顺序
随机的
yesiamrocks / cssanimation.io在现代 Web 开发理念中，cssanimation.io 是控制 CSS 和GreenSock动画的最佳库。要使用此库，您需要具备 HTML 和 CSS3 的基础知识。我们相信您已经具备这些知识。如果您感到困惑，可以从这里开始复习一下，以便更轻松地继续学习。
这个库安装和使用起来非常简单。只要使用我们提供的动画类名，就能实现任何你想要的效果。所以，赶紧下载，开始使用这个库吧！
我们还为您提供GreenSock动画，点击此处即可获取指南。
首先，您可以下载完整的库文件，或者使用 jsDelivr 提供的 CDN 托管版本。所有 CDN URL 如下：
cssanimation.css将样式表包含cssanimation.min.css到…中Angrytools 实际上是一个包含各种生成器的集合，其中也包括 CSS 动画生成器。
它可能不如 Animista 那么复杂，但我发现它也相当不错。
这个网站还提供了一些自定义动画的功能，例如动画的持续时间和延迟。
但我最喜欢的是，你可以将keyframes自己添加到所谓的“时间轴”中，然后直接在那里编写代码。此外，你还可以编辑现有的动画。 完成后，你可以获得完整的动画代码，或者根据需要下载它。
Hover.css 是一系列 CSS 动画的集合，与上面的动画不同，每次鼠标悬停在元素上时都会触发这些动画。
一系列基于 CSS3 的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等。
它拥有一些非常惊艳的动画效果。更重要的是，它还提供了用于图标动画的类，例如 Font Awesome。
您可以在我之前的文章中了解 Font Awesome 。
很简单：只需将类名添加到元素中，例如：
<button class="hvr-fade">Hover me!</button>
IanLunn / Hover一套基于 CSS3 的悬停效果合集，可应用于链接、按钮、Logo、SVG、特色图片等元素。您可以轻松地将其应用到自己的元素中，进行修改，或者仅仅将其作为灵感来源。提供 CSS、Sass 和 LESS 版本。
npm install hover.css --savebower install hover --saveHover.css 的使用方法有很多种；你可以复制粘贴你想要的效果到你自己的样式表中，或者直接引用这个样式表。然后只需将效果的类名添加到你想要应用效果的元素上即可……
WickedCSS 是一个小型 CSS 动画库，它的动画样式不多，但现有的样式都非常出色。大多数都是我们已经熟悉的动画基础样式，但它们的实现方式非常简洁明了。
使用方法很简单，只需将动画名称添加到元素中即可。
<div class="bounceIn"></div>
document.querySelector('.my-element').classList.add('bounceIn')
$(".my-element").addClass("bounceIn")
kristofferandreasen / wickedCSS一个用于 CSS3 动画的库。
动画包括可在所有设置中使用的常规 CSS3 动画。此外，该库还包含一些炫酷的动画，这些动画并非在所有情况下都适用，但它们玩起来很有趣。
有关示例和文档，请查看项目页面。
要使用该库，只需下载该文件并在您的头部中链接到它即可。
<link rel="stylesheet" href="wickedcss.min.css"/>
或者未压缩的版本。
<link rel="stylesheet" href="wickedcss.css"/>
只需将动画类添加到元素中，即可执行炫酷的动画效果。
<div class="barrelRoll"> Place your content here </div>
在这种情况下，div 元素的内容将执行桶滚动画。所有类都可以在项目页面找到。
这些类可以应用于所有元素，包括图像。
<img src="images/mushroom.png" class="spinner"/>
Three Dots 是一组 CSS 加载动画，由三个点组成，而这三个点仅由一个元素构成。
只需创建一个div元素，并添加动画的名称即可
<div class="dot-elastic"></div>
Three Dots 是一套仅使用单个元素实现的 CSS 加载动画。我认为这个项目不仅可以提升你的 CSS 技能，还能激发你的想象力。
npm install three-dots --save
@use 'three-dots';
div标签：<div class="dot-elastic"></div>
以下是您可以选择的三点式课程列表：
dot-elastic
dot-pulse
dot-flashing
dot-collision
dot-revolution
dot-carousel
dot-typing
dot-windmill
dot-bricks
dot-floating
dot-fire
dot-spin
dot-falling
dot-stretching
使用 Dart Sass API 自定义圆点的大小（颜色、间距等）。
@use 'three-dots' with (
$dot-width: 20px,
$dot-height: 20px,
...
);
可用变量及其默认值。
$dot-width: 10px
$dot-height: 10px;
$dot-radius: $dot-width/2;
$dot-color: #9880ff;
$dot-bg-color: …
最后，来点抖动效果。
顾名思义，CSShake 是一个 CSS 动画库，其中包含各种类型的抖动动画。
添加shake {animation_name}到您的元素中。
<div class="shake shake-hard"></div>
document.querySelector('.my-element').classList.add('shake','shake-hard')
$(".my-element").addClass("shake shake-hard")
elrumordelaluz / csshake一些可以用来移动 DOM 的 CSS 类！
您可以下载完整csshake.css文件，也可以下载每个摇晃动画的单独文件（例如csshake-little.css）。每个文件都有放大版和缩小版两种选择。
我为了一个大项目需要做一个“摇晃动画”。一开始，我用原生 CSS 实现了它。完成后，我发现了@jackrugile开发的这个很棒的 jQuery 插件。然后我开始思考，并创建了这个小型 CSS 项目。
fork 此仓库
$ git clone https://github.com/elrumordelaluz/csshake.git
或通过 Bower
$ bower install csshake
或通过 npm
$ npm i csshake
$ npm run watch
$ npm run build:raw
$ npm run build:min
cdnjs现在，每个摇晃动画也都可以使用： https://cdnjs.com/libraries/csshake
首先引入 CSS 文件
<link rel="stylesheet" type="text/css" href="csshake.css" />`
然后对你想抖动的元素调用不同的类！
<div class="shake"></div>
<div