10个最佳CSS动画库
时间：2023-04-02 22:37:13
HTML
作者：PatrikKiss译者：前端小智点赞再看，微信搜索【大千世界】关注这个没有大厂背景，却有着向上积极向上心态的人.本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。内容1.Animista2.动画CSS3。活泼4。魔术动画CSS35。cssanimation.io6。愤怒的工具7。Hover.css8。邪恶的CSS9。三点10。AnimationAnimista是一个在线动画生成器，也是一个动画库，它为我们提供了以下功能1.选择不同的动画我们可以选择想要的动画类型（比如进入/存在），除了选择一个动画（比如缩放）-in)甚至为此动画选择不同的呈现方式（例如：向右缩放）。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我们还可以通过添加下面列出的类之一来控制动画速度。类名Speedtimeshow2sslower3sfast800msfaster500ms
3.Vivify网站地址：http://vivify.mkcreative.cz/网站描述：一个更丰富的css动画库Vivify是一个动画库，可以看作是AnimateCSS的增强版。它们的工作方式完全相同，拥有AnimateCSS的大部分类并扩展了一些。
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")也可以加上无限类，这样动画就可以循环播放了。
