本文介绍了Animate.css、animista、MagicCSS、CSShake、Hover.css和Loaders.css六个流行的CSS动画库，包括其特点、使用方法和适用场景，帮助提升网页设计的吸引力和用户体验。
目录
我的博客原文：推荐六个常用的CSS动画库
一、Animate.css
官网地址：Animate.css | A cross-browser library of CSS animations.
Animate.css是一个即用型跨浏览器动画库，可在您的 Web 项目中使用。非常适合强调、主页、滑块和注意力引导提示。
主要特征
-
易于使用：您只需通过CDN添加此库或使用 Yarn 或 NPM 等包管理器安装它即可开始使用它。
-
有很多模板：主页有大量模板，您可以在将它们包含在项目中之前对其进行测试。
-
与 javascript 兼容：您可以通过将 Animate.css 与 JavaScript 结合来为其添加交互性。
Animate.css 是一个免费的开源库。
二、animista
官网地址：https://animista.net
Animista与其说是一个库，不如说是一个CSS动画平台，因为它按需提供动画，即你在平台可以选择想要的动画类型，然后为你生成动画CSS关键帧代码。
Animista上可用的动画类型与animate.css上提供的动画类型非常相似，但是，如果深入研究，你会发现Animista提供了更多有用的动画类别，特别是在动画文字和背景元素方面。而且，在你准备导出动画代码时，还可以选择标准下载或压缩代码。
三、Magic CSS
Magic CSS也是一个很有趣的动画库，与之前介绍的动画库相比，它提供的的动画更具吸引力。软件包提供的动画对于页面过渡非常方便。但是，magic CSS的一个缺点是它不支持Opera迷你浏览器。
四、CSShake
官网地址：https://elrumordelaluz.github.io/csshake/
CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。
五、Hover.css
官网地址：http://ianlunn.github.io/Hover/
Hover.css 是一个基于 CSS3 的动画库，专门用于创建图像悬停效果。它提供了多种简单易用的特效，例如左右翻转、上下翻转、放大缩小、渐变缩放等。Hover.css 可以为网站的图片增加生动有趣的效果，吸引用户的注意力。
六、Loaders.css
官网地址：https://github.com/ConnorAtherton/loaders.css.git
Loaders.css 是一个轻量级的 CSS3 动画库，专门用于创建加载动画和进度条效果，提供了多种简单易用的设计。使用 Loaders.css 可以为页面的加载过程增加一些生动有趣的元素，降低用户等待时的焦虑感。
今天就介绍到这里啦！ 欢迎在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
往期回顾
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
