【收藏】20款CSS3动画库，你值得“拥有”

电玩女神 2021-07-26 11:06 805阅读 0赞

今天逛“市场”看到一些不错的[CSS3][]动画库，感觉很不错，就收藏了，分享给大家拉。帮助开发者在一定的期限内取得有创造性和创新性的成果。

**1. [Kite][] **

![144848lsvpvijcv2lrfjv2][]

Kite是一个灵活的布局助手CSS库。Kite使用\`inline-block\`而不是最新的CSS语法。它注重实际，易于理解且容易使用。 Kite用法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可。

**2. [DynCSS][] **

![14484930wj6atuw93lfbup][]

DynCSS 将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面指出的CSS属性。你可以将任何CSS属性设置为动态–前提是它对于jQuery的[css][]()方法是可写的。你可以通过附加-dyn-前缀并指定一个引用的javascript表达式来实现。

**3. [Progressjs][] **

![144849a1njij2hj5ll1z2w][]

ProgressJs 是一个 JavaScript 和CSS3库，可以帮助开发者创建和管理页面上所有元素的进度。你可以设计自己的进度条模板并且可以轻松自定义它。你也可以用ProgressJs 来为用户显示内容加载（图片，视频等）的进度。它可以用在textbox，textarea 甚至整个body上。

**4. [Hover.CSS][]**

![144849i0pdg89mmgxm8i33][]

Hover.CSS 是一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.[css][]可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几个效果，最佳实践是复制粘贴一个效果。

**5. [Spinkit][] **

![144850veel7ple6vt6wev9][]

Spin kit是一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案–如果你需要支持哪些还没实现CSS动画属性（像 是IE9及之前的版本）的浏览器，你需要检测下这些动画属性并实现一个变通方案。

**6. [Magic CSS3 Animation][] **

![1448501ezopet4yzvggy6p][]

Magic CSS3 Animations 是一个特殊效果的CSS3动画库，你可以免费用于你的web项目。简单的引用CSS样式：magic.css或精简版magic.min.css即可。

**7.[Bounce.js][] **

![1448512ngxmo4domf7u2md][]

Bounce.js是一个用来生成不错的CSS3驱动关键帧动画的工具。用于生成动态动画的JS库是在该工具中投入使用。简单地添加一个组件，选择预设，然后你就会得到一个短URL地址或者导出到CSS。

**8. [ImaCSS][]**

** **

![144851h6qummpqm0mp7qwk][]

Imacss是用来将图像文件转换为数据地址的库和应用。该地址可以用来插入到CSS文件中作为背景图片。本质上来讲，它能让你减少所有你对你设计的图片（如图标等）的HTTP请求，并使之能够单个调用。

**9.[Buttons][] **

![1448526kk16mt8jlqz9ljd][]

Buttons是一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建，支持正方形、圆角矩形或 者圆形的按钮，并且可选是否扁平以及其他自定义的效果（如发光）。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改，并且可以非常容易的进行 扩展。

**10.[OdoMeter][]**

![1448520fh690hjonfs6is6][]

OdeMeter是一个用来创建一些我们比较熟悉的如“\*\*里程显示，机场信息板或角子机”等效果或者面板的JavaScript-CSS库。该库 是独立式+轻量级（3kb）的，使用CSS为效果进行转换，所以效率极高（当然也有回退设置）。它简单地将一个给定的元素转换到另一个具有单行函数的预定 义的值。

**11. [Single Element CSS Spinner][] **

![1448529ezft13116xws3fh][]

Single Element CSS Spinners是一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div，其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。

**12. [Ani.js][] **

![144853oxjj6qle0o96z6gg][]

AniJS是一个CSS动画的声明处理库，它能够使开发更便利且能提高开发速度。它文档完善且易于上手。

**13. [Beautons][] **

![144853uy3zqy5rz7de35p3][]

Beautons是一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上，包括改变它们的大小，设置它们的可用与否以及更多设置。

**14. [Saffron][] **

![144853n503a377vta71j3v][]

Saffron是一系列Sass混合器和助手集，能够使添加CSS3的动画和过渡非常简单。只需要包括一个mixin在SASS声明中，然后使用变量和混合参数设置一些配置。使用Saffron，你能够完全控制动画和过渡的行为。

**15. [CSS Shakes][]**

![144854oe6hw4bty5b7t5w0][]

这是一个能够震动和晃动‘DOM’的CSS类集合。

**16. [Typebase.css][]**

[![1448548j878j5sj1kkt785][]][1448548j878j5sj1kkt785 1]

Typebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本，所以能够很容易地修改融入现代的Web项目。它提供了所 有排版所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改，能和normalize.css很好的工作。

**17. [Sassline][]**

![144854bebo99uha117nf7o][]

在web上使用Sass & rems设置文本到基线网格。Sassline可以用在博客、prototyping以及其他Web项目。它有建议的基础字体样式和混合比例已达到基线网 格的良好配合。为每个断点选择一个modular-scale，其运行响应将会更好。

**18. [TypeSettings][]**

![144855x2g20gl50n0bcbtd][]

一个Sass工具包，基于modular scale有Ems风格，纵向风格，响应比基于headlines。

**19. [Type Rendering Mix][]**

![144856558r6u56hfv6pfrj][]

Type Rendering Mix是个小型的JavaScript库，它允许只有使用核心文本时（在iOS和OS X上）才应用样式，在实现更一致的渲染同时保持高精度原态。

**20. [Hint.css][]**

![144856jidae0jqd00wi055][]

Hint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮，有箭头且可放置在父元素的任何一边。

[CSS3]: http://www.jiangweishan.com/Html5/
[Kite]: http://hiloki.github.io/kitecss/
[144848lsvpvijcv2lrfjv2]: /images/20210726/be4bea7a4edd49a2a38c235921edc738.png
[DynCSS]: http://www.vittoriozaccaria.net/dyn-css/#what-is-it
[14484930wj6atuw93lfbup]: /images/20210726/61b0c81f499f4b27ab18b7131388a29c.png
[css]: http://www.webclks.com/archives/tag/css
[Progressjs]: http://usablica.github.io/progress.js/
[144849a1njij2hj5ll1z2w]: /images/20210726/a3f3654a76d942e1ad92292bbf4befc8.png
[Hover.CSS]: http://ianlunn.github.io/Hover/
[144849i0pdg89mmgxm8i33]: /images/20210726/f004e070f7a74307ae10c38d2993287f.png
[Spinkit]: http://tobiasahlin.com/spinkit/
[144850veel7ple6vt6wev9]: /images/20210726/e8744e6612694ba490dc1a6e076f441b.png
[Magic CSS3 Animation]: http://www.minimamente.com/example/magic_animations/
[1448501ezopet4yzvggy6p]: /images/20210726/82cb3053d6ab41918a0ae1bb2f3072be.png
[Bounce.js]: http://bouncejs.com/
[1448512ngxmo4domf7u2md]: /images/20210726/de4a09d1112b46f9a96c57c7b05846b2.png
[ImaCSS]: https://github.com/akoenig/imacss
[144851h6qummpqm0mp7qwk]: /images/20210726/b77d40375e1b41c980cf8caddc096813.png
[Buttons]: http://alexwolfe.github.io/Buttons/
[1448526kk16mt8jlqz9ljd]: /images/20210726/973e83a94f174998b13337c5a62b7095.png
[OdoMeter]: http://github.hubspot.com/odometer/docs/**/
[1448520fh690hjonfs6is6]: /images/20210726/4726cd91ace444dd85b0d52af94979f7.png
[Single Element CSS Spinner]: http://projects.lukehaas.me/css-loaders/
[1448529ezft13116xws3fh]: /images/20210726/072a6e821bfa41b2aa0bc14949b3e7d4.png
[Ani.js]: http://anijs.github.io/
[144853oxjj6qle0o96z6gg]: /images/20210726/3aec37bb233a4b1b985d276f7080af4e.png
[Beautons]: http://csswizardry.com/beautons/
[144853uy3zqy5rz7de35p3]: /images/20210726/1d94f40240cb4139aa4b06c43df2d18b.png
[Saffron]: http://colindres.me/saffron/
[144853n503a377vta71j3v]: /images/20210726/e1fc86d573904fd28255ac29b985947d.png
[CSS Shakes]: http://elrumordelaluz.github.io/csshake/#1
[144854oe6hw4bty5b7t5w0]: /images/20210726/e8744e6612694ba490dc1a6e076f441b.png8
[Typebase.css]: http://devinhunt.github.io/typebase.css/
[1448548j878j5sj1kkt785]: /images/20210726/4b4085e9c25f45de89c6a1e19046c734.png
[1448548j878j5sj1kkt785 1]: http://www.webclks.com/wp-content/uploads/2014/07/1448548j878j5sj1kkt785.jpg
[Sassline]: http://sassline.com/
[144854bebo99uha117nf7o]: /images/20210726/f8e736d6e7034ba88c88ed2bfb4a7179.png
[TypeSettings]: http://typesettings.io/
[144855x2g20gl50n0bcbtd]: /images/20210726/3fcf35dbba6a4e9ebfe3217798e6ce0e.png
[Type Rendering Mix]: http://typerendering.com/
[144856558r6u56hfv6pfrj]: /images/20210726/9ffc76c68af4449db523499171a37423.png
[Hint.css]: http://kushagragour.in/lab/hint/
[144856jidae0jqd00wi055]: /images/20210726/bbde537f7ad64c498f5100d16d31c5bd.png