推荐六个常用的CSS动画库

目录

 一、Animate.css

二、animista

三、Magic CSS

四、CSShake

 五、Hover.css

​六、Loaders.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 Animations CSS3

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 可以为页面的加载过程增加一些生动有趣的元素，降低用户等待时的焦虑感。

​

今天就介绍到这里啦！ 欢迎在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御