能解决 80% 需求的 10个 CSS动画库(CSS动画库)

作者：Patrik Kiss译者：前端肖智来源：dev
1.Animista网站地址：http://animista.net/网站描述3360在线生成css动画。
Animista是一个在线动画生成器和一个动画库，它为我们提供了以下功能
1.选择不同的动画。我们可以选择所需的动画类型(如入口/出口)。除了特定的动画(例如放大)，我们甚至可以为动画选择不同的显示效果(例如向右放大)。
2.自定义Animista还提供了一个功能，允许我们自定义动画的某些部分，例如
Durationdelaydirection更好的是，你可以选择对象：来制作动画。
3.生成CSS代码选择适合自己需求的动画后，我们可以直接从网站获取代码，甚至可以压缩：
4.下载代码的另一个有用的功能是，你可以收集你喜欢的动画，一起下载。或者，我们可以选择将这些动画的代码复制在一起。
2.动画CSS网站地址：http://daneden.github.io/animate.css
描述一下3360网站完整的CSS3动画库。
这个不用介绍，大部分人都知道。Animate CSS可能是最著名的动画库之一。下面简单介绍一下它的用法：
1.用法首先，必须将类animated添加到始终需要的动画元素中，然后是动画的名称。
如果我们希望动画永远持续，我们可以添加无限类。
通过JS添加动画：
Document.queryselector(‘。我的元素)。Classlist.add (‘animated ‘，’ slideinleft ‘)通过JQ添加动画：
$ (‘.我的元素)。添加类(‘ AnimateDSlidineLeft’) 2。CSS提供了一些基本的类来控制动画的延迟和速度。
**延迟**
您可以添加delay类来延迟动画。
**速度**
我们还可以通过添加下面列出的一个类来控制动画速度。
类名速度时间显示2s慢3s快800ms快500ms
3.生动网站地址： http://vivify.mkcreative.cz/
描述一下网站：一个更丰富的css动画库
Vivify是一个动画库，可以看作是Animate CSS的加强版。它们以完全相同的方式工作，使用大多数动画CSS类和一些扩展。
使用JS模式：
Document.queryselector(‘。我的元素)。Classlist.add (‘Vivify ‘，’ Slideinlet ‘)使用JQ方法：
$ (‘.我的元素)。像Animate CSS一样，Vivify也提供了一些类来控制动画的持续时间和延迟。
和延迟持续时间类别可用于以下时间间隔：
4.魔幻动画CSS3网址3360 https://www.minimamente.com/project/magic/
描述网站：魔CSS3动画是CSS3动画的一个包，有特效。用户可以在web项目中自由使用它。
这个动画库有一些非常漂亮流畅的动画，尤其是3D的。没什么好说的。你自己试试。
使用JS模式：
Document.queryselector(‘。我的元素)。classlist.add(‘魔法时间’，’淡入’)使用JQ方法：
$ (‘.我的元素)。添加类(‘ MagicTimeFadein’) 5。CssAnimation.io网址： http://cssanimation.io/index.html
Cssanimation.io集合了很多不同的动画，总共200个左右，非常强大。如果你在这里连自己需要的动画都找不到，那在其他地方就很难找到了。
其工作原理类似于Animista。例如，您可以选择一个动画并直接从站点获取代码，也可以下载整个库。
使用
将cssanimation {animation_name}添加到指定元素。
使用JS
Document.queryselector(‘。我的元素)。Classlist.add (‘CSS animation ‘，’ fadein ‘)使用JQ。
$ (‘.我的元素)。addclass(‘ cssanmationfadein ‘)也可以添加infinite类，这样动画就可以循环播放了。
另外，cssanimation.io还为我们提供了动画字母的功能。要使用它，我们需要引入letteranimation.js文件，然后将le {animation_name}添加到我们的文本元素中。
要按顺序制作字母动画，请添加sequence类，要随机制作字母动画，请添加random类。
顺序
随意
6.Angrytools网站地址：https://angrytools.com/css/animation/3360号
如果使用不同的生成器，Angrytools实际上是一个集合，其中还包括CSS动画生成器。
可能没有Animista那么复杂，但是我觉得这个也很不错。该网站还提供一些自定义动画的功能，如动画的持续时间或延迟。
但我喜欢的是，我们可以在它的演示时间线中添加自定义关键帧，然后我们可以直接在其中编写代码。或者，您可以编辑现有的。
当我们完成后，我们可以获得完整的动画代码或下载它。
7.Hover.css网址3360 http://ianlunn.github.io/Hover/网站描述：纯CSS3鼠标翻转效果动画库
Hover.css是许多css动画的集合。与上面的动画不同，每次您将鼠标悬停在某个元素上时，它都会被触发。
CSS3支持的一组悬停效果，可以应用于链接、按钮、logos、SVG和特色图片等。
* *用法
非常简单3360只需将类的名称添加到元素中，例如
Hoverme！8.WickedCSS网站地址3360 http://kristofferandreasen.github.io/wickedCSS/#
WickedCSS是一个小型CSS动画库。它的动画变种不多，但至少变化很大。大部分都是我们已经很熟悉的基础知识，但是真的很干净。
它的用法很简单，只需将动画的名称添加到元素中即可。
* *使用JS
Document.queryselector(‘。我的元素)。classlist.add (‘bounce in’) * *使用JQ
$ (‘.我的元素)。添加类别(“反弹”)9。三点公司网站地址： http://kristofferandreasen.github.io/wickedCSS/#
三点是一组CSS加载动画，由三个点组成，而这些点只由单个元素组成。
* *用法
只需创建一个P元素并添加动画的名称。
10.CSShake网站地址3360 http://kristofferandreasen.github.io/wickedCSS/#
顾名思义，CSShake是一个CSS动画库，里面包含了不同类型的振动动画。
* *用法
将shake {animation name}添加到元素中。
* *使用JS **
Document.queryselector(‘。我的元素)。classlist.add (‘shake ‘，’ shake-hard’) * *使用JQ **
$ (‘.我的元素)。添加类(“摇摇-硬”)原文：https://dev.to/web/10-of-the-best-CSS-animation-libraries-31D7