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

​​3.Vivify​​

​​Vivify​​​是一个动画库，我一直以为它是​​Animate CSS​​​的增强版。它的使用一样，有自己更多的类，但是也扩展了些。添加​​vivify​​​类到元素中，而不是​​animated​​。比如：

使用 Javascript

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')

使用 Jquery

$(".my-element").addClass("vivify slideInLeft")

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

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

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

​​4.Magic Animations CSS3​​

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

没什么好说的，自己去尝试下，玩下动画。

你可以添加​​magictime {animation_name}​​到你的元素中，如下：

使用 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}​​。

使用 Javascript

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')

使用 Jquery

$(".my-element").addClass("cssanimation fadeIn")

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

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

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

​​6.Angrytools​​

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

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

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

你可以在完成动效后获取完成的代码，或者整个-它。

​​7.Hover.css​​

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

一组CSS3驱动的悬停效果，可以应用到链接，按钮，logos，svg，图片特性和其他。

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

使用

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

Hover me!

​​8.WickedCSS​​

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

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

使用 Javascript

document.querySelector('.my-element').classList.add('bounceIn')

使用 Jquery

$(".my-element").addClass("bounceIn")

​​9.Three Dots​​

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

使用

创建一个​​div​​元素，然后添加动画名。

​​10.CSShake​​

最后，来点摇晃的抖动。

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

使用

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

使用 Javascript

document.querySelector('.my-element').classList.add('shake','shake-hard')

使用 Jquery

$(".my-element").addClass("shake shake-hard")

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。