CSS 动画库

有很多库想要帮助您在网络上为元素添加动画。这些库并不是真正帮助您处理动画的 *语法* 或技术的库，而是可以即拿即用的库。想要应用一个像“animate-flip-up”这样的类，然后观看一个元素，呃，翻转起来吗？这些就是您需要关注的库类型。

我衷心认为您应该 1）通过自己学习语法来学习如何在 CSS 中为元素添加动画，以及 2）自定义动画以使您的网站风格更具个性。尽管如此，浏览一下这样的库有助于激发想法，帮助您开始编写代码示例，并可能为您的项目奠定基础。

让我们看看这些库的概况。一些库采用了不同的方法：仅获取所需的类、Sass 混合宏、用于添加/删除类的轻量级 JavaScript 库等。但它们本质上都是“CSS 动画库”。（其中一些库在标题中带有“CSS3”，这有点过时了。人们不再这样称呼了。）

虽然动画既有趣又能创造有用的交互，但值得记住的是，并非所有用户在浏览网页时都希望看到动画。请参阅 Eric Bailey 的 “重新审视 prefers-reduced-motion，即简化运动媒体查询”，了解如何满足喜欢少量或没有运动的用户。

Animista

您可以选择自己喜欢的动画，它会为您提供一个可以使用的类名，该类名会调用一个关键帧动画（您需要复制粘贴两者）。关键在于您只需获取所需内容。

查看 CodePen 上 Chris Coyier 的笔
Animista 示例 (@chriscoyier)
在 CodePen 上。

Animate.css

Dan Eden 创建的一个大型经典 CSS 动画库。

查看 CodePen 上 Hudson Taylor 的笔
Animate.css（第 3 部分） (@Hudson_Taylor11)
在 CodePen 上。

tachyons-animate

Tachyons 本身是一个原子 CSS 库，它拥有大量实用程序类，本质上可以通过向所需内容添加类来设计任何内容。tachyons-animate 通过添加“单一用途类来帮助您编排 CSS 动画”来扩展这些类。它可以单独使用，但即使文档也建议可以将其与其他动画库结合使用，因为辅助类具有通用用途。

查看 CodePen 上 Chris Coyier 的笔
tachyons-animate (@chriscoyier)
在 CodePen 上。

Infinite

这些动画，例如旋转和脉冲，专门设计为无限运行和重复。

查看 CodePen 上 Chris Coyier 的笔
BgrYZo (@chriscoyier)
在 CodePen 上。

Motion UI

一个用于创建灵活的 CSS 过渡和动画的 Sass 库。

查看 CodePen 上 Chris Coyier 的笔
Motion UI (@chriscoyier)
在 CodePen 上。

micron

一个使用 CSS 动画构建并由 JavaScript 控制的 [μ] 微交互库。

查看 CodePen 上 Chris Coyier 的笔
Micron (@chriscoyier)
在 CodePen 上。

Vivify

Vivify 在某种程度上类似于 Animate.css，因为它包含了许多相同类型的动画。它也提供了许多自己的动画。

查看 CodePen 上 Chris Coyier 的笔
Vivify (@chriscoyier)
在 CodePen 上。

Hover.css

一个由 CSS3 提供支持的悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图片等。轻松应用于您自己的元素，修改或仅用于灵感。提供 CSS、Sass 和 LESS 版本。

查看 CodePen 上 Chris Coyier 的笔
Hover.css (@chriscoyier)
在 CodePen 上。

AllAnimationCss3

查看 CodePen 上 Chris Coyier 的笔
所有动画 (@chriscoyier)
在 CodePen 上。

Magic Animations CSS3

查看 CodePen 上 Chris Coyier 的笔
魔法动画 (@chriscoyier)
在 CodePen 上。

今天是星期二。

一个古怪的 CSS 动画库。

查看 CodePen 上 Chris Coyier 的笔
星期二 (@chriscoyier)
在 CodePen 上。

vhs

查看 CodePen 上 Chris Coyier 的笔
vhs (@chriscoyier)

在 CodePen 上。

ReboundGen

查看 CodePen
ReboundGen by Chris Coyier (@chriscoyier)
在 CodePen 上。

CSShake

查看 CodePen
CSSShake by Chris Coyier (@chriscoyier)
在 CodePen 上。

Motion CSS

cssanimation.io

查看 CodePen
cssanimation.io by Chris Coyier (@chriscoyier)
在 CodePen 上。

WickedCSS

查看 CodePen
WickedCSS 动画 by Chris Coyier (@chriscoyier)
在 CodePen 上。

Woah.css

查看 CodePen
Woah.css by Chris Coyier (@chriscoyier)
在 CodePen 上。

Obnoxious

查看 CodePen
Obnoxious.css by Chris Coyier (@chriscoyier)
在 CodePen 上。

Hexa

Mimic.css

查看 CodePen
mimic.css by Eric Treacy (@etreacy)
在 CodePen 上。