【译】推荐的十个CSS动画库

在这篇文章中，我将向你展现目前为止，我发现/遇到的十个优秀的CSS动画库。

我大约尝试30种，可是这十种是我找到最好的。

请注意，这些库不须要引入JavaScript就能够运行。

再次提醒：整篇文章是经过手机编写的，因此，若是你在电脑或平板下查看，下面的截图看起来并不友好。

1.Animista

这个站点是我不久前才发现的，可是我立马爱上了她。实话说，它值得被提出。

Animasta是一款在线生成器也是一个库，为你提供下面的特性：

1.丰富的动画可供选择

你能够选择你喜欢的动画类型（好比：进入/退出），此外你也能够选择特定的一种（好比：scale-in），甚至，你能够为该动画选择不一样的变化（好比：scale-in-right）。

2.定制化

Animista还为你提供了一项功能，容许你自定义动画的某部分，好比：

• 持续时间
• 延迟时间
• 或者方向

更好的是，你能够选择设置动画的对象，它有多是：

• 一个简单的居中方块
• 一个字符
• 背景
• 甚至一张图片

3.获取CSS代码

选择适合本身须要的动画后，你能够直接从网站种获取代码。

你也能够选择压缩版的代码。

4.下载选择的动画

另外一个惊奇的功能是，你能够将喜欢的动画的代码放到你的列表中，并仅下载你喜欢的动画代码。或者你能够将这些动画代码复制到一块儿。

此站点上更好的是，它是响应式的，这意味着你如今就可使用手机浏览器它。

2.Animate CSS

固然，我也必须说起Animate CSS，也许这是一个众所周知的动画库。

我将简单介绍如何使用它。

1.使用

在你须要添加动画的元素上添加animated类名，而后就是添加动画的名称。

好比

<div class="animated slideInLeft"></div>
复制代码

若是你但愿动画是持久的，你能够添加infinite类，这样动画将不停地重复自身。

• 经过 JavaScript

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
复制代码

• 经过 Jquery

$(".my-element").addClass("animated slideInLeft")
复制代码

2.额外的特性

Animate CSS为你提供了一些基本的类去操做动画的延时和速度。

• 延时

你能够经过使用delay类来延迟你的动画。

<div class="animated slideInLeft delay-{1-5}"><div> 复制代码

• 速度

你能够经过添加下表中的类来控制动画的速度。

Class name	Speed time
slow	2s
slower	3s
fast	800ms
faster	500ms

<div class="animated slideInLeft slow|slower|fast|faster"><div>
复制代码

3.Vivify

Vivify是一个动画库，我一直觉得它是Animate CSS的加强版。它的使用同样，有本身更多的类，可是也扩展了些。添加vivify类到元素中，而不是animated。好比：

<div class="vivify slideInLeft"></div>
复制代码

• 使用 Javascript

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
复制代码

• 使用 Jquery

$(".my-element").addClass("vivify slideInLeft")
复制代码

就像Animate CSS同样，Vivify也为你提供了一些类来控制动画的持续时间和延迟时间。

延迟和持续时间的类在下面的间隔中可用：

<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
复制代码

注意：值的单位是毫秒（ms）。1000ms = 1s

4.Magic Animations CSS3

这个动画库有些不错而且流畅的动画，我特别喜欢3D动画。

没什么好说的，本身去尝试下，玩下动画。

你能够添加magictime {animation_name}到你的元素中，以下：

<div class="magictime fadeIn"></div>
复制代码

• 使用 Javascript

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
复制代码

• 使用 Jquery

$(".my-element").addClass("magictime fadeIn")
复制代码

5.cssanimation.io

cssanimation.io是一大堆不一样动画的集合，总共大约有200个，真是太神奇了。

若是在这里都找不到你想要的动画，那你在哪都找不到了。

它的使用方式相似animista。好比，你能够直接选择动画，而后直接从网站中获取，或者下载整个库。

使用

为你的元素添加cssanimation {animation_name}。

<div class="cssanimation fadeIn"></div>
复制代码

• 使用 Javascript

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
复制代码

• 使用 Jquery

$(".my-element").addClass("cssanimation fadeIn")
复制代码

你也能够添加infinite类，以便动画不断重复。

<div class="cssanimation fadeIn infinite"></div>
复制代码

此外，cssanimations.io为你提供了动画字母的功能。为了实现这个，你须要在head标签中引入letteranimation.js文件，而后在你的文本元素中添加le{animation_name}。

<div class="cssanimation leSnake"></div>
复制代码

想要字母动画有序进行，添加sequence类；想要字母动画无序进行，添加random类。

<div class="cssanimation leSnake {sequence|random}"></div>
复制代码

6.Angrytools

若是使用生成器（Angrytools不错），Angrytools其实是一个集合，其中还包括CSS动画生成器。

它可能不像Animista那么复杂，可是我发现这个也很棒。这个网站也为你提供了定制动画的功能，好比持续时间和延迟时间。

可是我喜欢它的是，你能够在时间线上添加keyframes（关键帧），而且你能够直接在那里写代码。并且，你也能够编辑现有的一个效果。

你能够在完成动效后获取完成的代码，或者整个下载它。

7.Hover.css

Hover.css是众多CSS动画的集合，与上面的动画不一样，每次将元素悬停时都会触发。

一组CSS3驱动的悬停效果，能够应用到连接，按钮，logos，svg，图片特性和其余。

它有一些惊人的动效。并且它还有用于动画图标的类，好比超棒的字体。

使用

使用很简单：将类名添加到你的元素中，好比：

<button class="hvr-fade">Hover me!</button>
复制代码

8.WickedCSS

WickedCSS是一个小型的CSS动画库，没有太多的动画体，可是它至少有很棒的动画。它们中大多数是咱们熟悉的基本动画，可是它们真是很简洁。

使用方法很简单，只要为你的元素添加动画名就好了。

<div class="bounceIn"></div>
复制代码

• 使用 Javascript

document.querySelector('.my-element').classList.add('bounceIn')
复制代码

• 使用 Jquery

$(".my-element").addClass("bounceIn")
复制代码

9.Three Dots

Three Dots是CSS加载动画的集合，仅由三个简单元素制做而成的三个点建立。

使用

建立一个div元素，而后添加动画名。

<div class="dot-elastic"></div>
复制代码

10.CSShake

最后，来点摇晃的抖动。

如其名，CSShake包含了不一样类型的抖动动画的CSS动画库。

• 使用

添加shake {animation_name}到你的元素中。

<div class="shake shake-hard"></div>
复制代码

• 使用 Javascript

document.querySelector('.my-element').classList.add('shake','shake-hard')
复制代码

• 使用 Jquery

$(".my-element").addClass("shake shake-hard")
复制代码

后话

• 原文：dev.to/weeb/10-of-…
• 文章首发：github.com/reng99/blog…
• 更多内容：github.com/reng99/blog…