科技资讯眺望|能解决 80% 需求的 10个 CSS动画库作者：PatrikKiss译者：前端小智来源：

作者：Patrik Kiss 译者：前端小智来源：dev
1.Animista网站地址:网站描述:在线生成 css 动画
Animista是一个在线动画生成器，同时也是一个动画库，它为我们提供了以下功能
1. 选择不同的动画我们可以选择想要的动画类型（例如entrance/exist），除了可以选择某个动画（例如， scale-in）外，甚至还可以为该动画选择不同的展示效果（例如：scale-in-right）。
2. 定制Animista还提供了一个功能，允许我们定制动画的某些部分，比如

duration
delay
direction

更好的是，可以选择要设置动画的对象:

3. 生成CSS代码选择适合自己需要的动画后，我们可以直接从网站上获取代码，甚者可以进行压缩：

4. 下载代码另一个好用的功能是，可以把自己收藏自己喜欢的动画，然后一起下载下来，或者，我们也可以选择将这些动画的代码复制到一起。

2. Animate CSS网站地址:http://daneden.github.io/animate.css
网站描述:齐全的CSS3动画库

想必这个不用介绍，大部分人都知道了。 Animate CSS 可能是最著名的动画库之一。这里简要介绍一下它的用法：
1. 用法首先，必须在总需要动画元素上添加类animated，然后是动画的名字。
如果我们想让动画一直持续，可以添加infinite类。
通过 JS 来添加动画：
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')通过 JQ 来添加动画：
$(".my-element").addClass("animated slideInLeft")2. 其它功能Animate CSS提供了一些基本的类来控制动画的延迟和速度。
** delay **
可以添加 delay 类来延迟动画的播放。
** speed **
我们还可以通过添加如下列出的类之一来控制动画速度。
类名速度时间show2sslower3sfast800msfaster500ms
3. Vivify网站地址:
网站描述: 一个更加丰富css动画库

Vivify 是一个动画库，可以看作是Animate CSS的增强版。它们的工作方式完全相同，有Animate CSS的大多数类且还扩展了一些。
使用 JS 方式：
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')使用 JQ 方式：