10个你离不开的CSS动画库！

时间：2023-04-02 11:20:31 HTML

1。Animista网站地址：http://animista.net/网站描述：在线生成css动画Animista是一个在线的动画生成器，也是一个动画库，它为我们提供了以下功能1.选择不同的Animation我们可以选择我们想要的动画类型想要（例如入口/存在）。除了选择一个动画（比如scale-in），我们甚至可以为动画选择不同的显示效果（比如：scale-in-right）。2.CustomizeAnimista还提供了一个功能，可以让我们自定义动画的某些部分，比如durationdelaydirection更好的是，你可以选择要动画的对象：3.生成CSS代码选择适合你需要的动画后，我们就可以直接从网站上获取代码，甚至压缩一下：4、下载代码还有一个很好用的功能就是可以把自己喜欢的动画保存起来一起下载，或者我们也可以选择把这些动画的代码一起复制过来。2、AnimateCSS网址：http://daneden.github.io/anim...网站描述：一个完整??的CSS3动画库，不用介绍，大多数人都知道。AnimateCSS可能是最著名的动画库之一。下面简单介绍一下它的用法：1.用法首先要给一直需要动画的元素加上animated类，然后是动画的名称。

如果我们想让动画一直持续下去，我们可以添加无限类。通过JS添加动画：document.querySelector('.my-element').classList.add('animated','slideInLeft')通过JQ添加动画：$(".my-element").addClass("animatedslideInLeft")2。其他功能AnimateCSS提供了一些基本类来控制动画的延迟和速度。delay你可以添加延迟类来延迟动画的播放。

speed我们还可以通过添加下面列出的类之一来控制动画速度。

3.Vivify网址：http://vivify.mkcreative.cz/网站描述：一个更丰富的css动画库Vivify是一个动画库，可以看作是AnimateCSS的增强版。它们的工作方式完全相同，拥有AnimateCSS的大部分类并扩展了一些。

JS方法：document.querySelector('.my-element').classList.add('vivify','slideInLeft')JQ方法：$(".my-element").addClass("vivifyslideInLeft")和AnimateCSS一样，Vivify也提供类来控制动画持续时间和延迟。延迟和持续时间类在以下间隔内可用：

4.MagicAnimationsCSS3网址：https://www.minimamente.com/p...网站描述：MagicCSS3Animations是一个带有特效的CSS3动画包，用户可以在web项目中自由使用。这个动画库有一些非常漂亮和流畅的动画，尤其是在3D中。话不多说，自己试试吧。

JS方法：document.querySelector('.my-element').classList.add('magictime','fadeIn')JQ方法：$(".my-element").addClass("magictimefadeIn")5.cssanimation.io网址：http://cssanimation.io/index....cssanimation.io是很多不同动画的集合，总共有200个左右，功能强大。如果您在这里找不到您需要的动画，那么在其他任何地方都很难找到。它的工作原理类似于Animista。例如，您可以选择动画并直接从站点获取代码，也可以下载整个库。用法将cssanimation{animation_name}添加到指定元素。

使用JSdocument.querySelector('.my-element').classList.add('cssanimation','fadeIn')使用JQ$(".my-element")。addClass("cssanimationfadeIn")也可以加上无限类，这样动画就可以循环播放了。