精选！CSS 动画之工具、框架和教程

   <p style="text-align:center"><img src="https://simg.open-open.com/show/4eab55bb6589d86eccacd32710b87c3f.jpg"></p>    <p>CSS 动画之工具、框架和教程</p>    <p>在这篇文章中，我们将不讨论 使用 CSS 动画的好处 ，也不会谈论 JS 动画是否比 CSS 动画更快 ，而是与你分享一些 CSS 工具，框架和教程。它们将有助于缓解你在学习 CSS 动画中的困扰，并帮助你节省一些时间。</p>    <h2>CSS 动画工具和框架</h2>    <p>1. <a href="/misc/goto?guid=4958960993055021935" rel="nofollow,noindex">Animate.css</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/381a42bea817a51623aa120bc5fa3794.jpg"></p>    <p>Animate.css 是一个跨浏览器 CSS 动画的集合，你可以在滚动条、主页上等 Web 项目中使用它。</p>    <p>2. <a href="/misc/goto?guid=4958542313009830209" rel="nofollow,noindex">Stylie</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2a4589110027b417cc205c1808174754.jpg"></p>    <p>Stylie 是一个可视化的 CSS3 动画工具，你可以使用它来配置和生成专属的动画合集。</p>    <p>3. <a href="/misc/goto?guid=4959735483416059799" rel="nofollow,noindex">animo.js</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4280783f1ab52176079b3175fc1aebe9.jpg"></p>    <p>animo.js 是一个强大的 CSS 动画管理工具。你可以轻松按顺序堆放动画，或者在任何事件、任何时刻指定要播放的动画。</p>    <p>4. <a href="/misc/goto?guid=4959735483501612004" rel="nofollow,noindex">Anima</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/88e39131e1dfa45befef3364e406e998.jpg"></p>    <p>轻量级（当 gzip 压缩时只有 5 k）Anima 允许你同时对多个对象进行动画处理，而每个项目都可以通过质量和密度来模拟现实生活中的物体。 同时，你可以利用 CSS 变换和 3D 变换与 JavaScript 一起创建动画。</p>    <p>5. <a href="/misc/goto?guid=4959735483585752554" rel="nofollow,noindex">Rocket</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/83fa160052699866be75e28ac6dc9a7b.png"></p>    <p>Rocket 是一个用于创建网页动画的简单工具。</p>    <p>6. <a href="/misc/goto?guid=4958968438859443582" rel="nofollow,noindex">Animate Plus</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cffb59583ba6ac0e5263a89859f0fe45.png"></p>    <p>Animate Plus 是一个高性能的 JavaScript 库，它能帮助你建立动态的 CSS 属性和 SVG 属性。</p>    <p>7. <a href="/misc/goto?guid=4958966968710193577" rel="nofollow,noindex">Tuesday</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/262524660464c61a10011fac756e2907.png"></p>    <p>Tuesday 是一款奇特的 CSS 动画库。</p>    <p>8. <a href="/misc/goto?guid=4958974098735356899" rel="nofollow,noindex">Shift.css</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fb44536b4873376f3567bf3198b0f031.png"></p>    <p>Shift.css 是一个用于创建定时的 CSS 动画的简单响应式框架。</p>    <p>9. <a href="/misc/goto?guid=4958974098812927753" rel="nofollow,noindex">Motion UI</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1c58c78c2b420d310b02990c0ae6beb7.gif"></p>    <p>Motion UI 是一个用于创建灵活的 CSS 转换和动画的 Sass 库。</p>    <p>10. <a href="/misc/goto?guid=4958834600264415657" rel="nofollow,noindex">CSS Shake</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/46f36ae33a505e792fcac3b98e9953ed.jpg"></p>    <p>CSS Shake 是一套 CSS3 实现的动画特效，它可以让页面的 DOM 元素实现各种抖动效果。</p>    <p>11. <a href="/misc/goto?guid=4959735483822337904" rel="nofollow,noindex">Magic Animations</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cf88c59f4241b8658c463b2b2f7a1b61.jpg"></p>    <p>Magic Animations 是一个具备独特的 CSS3 动画特效的小型库。</p>    <p>12. <a href="/misc/goto?guid=4958823601704275794" rel="nofollow,noindex">Hover.css</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a9ca54e62e71fe89acfb209b1e86a8ee.jpg"></p>    <p>Hover.css 是一套基于 CSS3 的鼠标悬停效果动画库。</p>    <p>13. <a href="/misc/goto?guid=4958862564327890547" rel="nofollow,noindex">Saffron</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/01c94cfe23eb62d0ae6661bcb282afac.jpg"></p>    <p>Saffron 是一个简单的 CSS3 动画和转换的 Sass mixin 库。</p>    <p>14. <a href="/misc/goto?guid=4958834597815334568" rel="nofollow,noindex">CSSynth</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3378c9f7b01a1086cdf7e2ef4868550f.jpg"></p>    <p>CSSynth 是一个可在线运行动画的应用程序。</p>    <p>15. <a href="/misc/goto?guid=4959735483987936880" rel="nofollow,noindex">Ceaser</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cc23e8cd8ced8df9dbf511f783af512b.jpg"></p>    <p>Caesar 是一个简单的 CSS 缓动动画工具，方便你轻松地在项目中使用。</p>    <p>16. <a href="/misc/goto?guid=4959731079467915841" rel="nofollow,noindex">WAIT! Animate</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fa7a07cc923370d60bd79f29c38de90b.jpg"></p>    <p>WAIT! Animate 是一款用于计算 CSS 动画中关键帧百分比的工具。</p>    <p>17. <a href="/misc/goto?guid=4958542312607078863" rel="nofollow,noindex">Tridiv</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/964407c0fd3218c84af708051aed6a39.jpg"></p>    <p>Tridiv 是一个基于 Web 的编辑器，你可以用 CSS 创建 3D 形状。同时，它跨浏览器兼容。</p>    <p>18. <a href="/misc/goto?guid=4958191120760154877" rel="nofollow,noindex">Morf.js</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/aafa9756651b39e4bbc66f936ac00cdd.jpg"></p>    <p>Morf.js 提供了一系列 JavaScript 的方法，帮助你利用自定义的缓动功能来生成硬件加速的 CSS3 转换效果。</p>    <p>19. <a href="/misc/goto?guid=4958542312915219926" rel="nofollow,noindex">CSS3 Keyframes Animation Generator</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/46439083634bdec77f1b29c834e8a553.jpg"></p>    <p>顾名思义，CSS3 Keyframes Animation Generator 是一个帮助你创建 CSS3 关键帧动画的在线工具。</p>    <p>20. <a href="/misc/goto?guid=4959735484195832649" rel="nofollow,noindex">Effeckt.css</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c979990d65fa18b5522de349367142b0.gif"></p>    <p>Effeckt.css 是一个提供了大量动画和转换效果的库。它包含了弹窗、按钮、导航、列表等特效动画，方便你在 Web 项目中使用。</p>    <p>21. <a href="/misc/goto?guid=4958542312702920083" rel="nofollow,noindex">CSS3 Animation Cheat Sheet</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0c10c8915c5d579a4260d3c1367e7f3a.jpg"></p>    <p>CSS3 动画速查表提供了一组预先制作的 CSS3 动画。你可以将样式表添加到你的网站，并将预先生成的 CSS3 类应用到必要的元素中。</p>    <h2>CSS 动画教程</h2>    <ul>     <li><strong><a href="/misc/goto?guid=4959735484313453401" rel="nofollow,noindex">CSS 动画初学者介绍</a> </strong><br> 本教程将向你展示，如何快速创建一个将正方形元素转化为圆形的动画示例。</li>     <li><strong><a href="/misc/goto?guid=4958827912661780297" rel="nofollow,noindex">CSS Transitions、Transforms 以及 Animation 教程</a> </strong><br> 这个网站的教程将指导你，如何在 Web 项目中使用 CSS3 中的Transitions、Transforms 以及 Animation。 教程也比较简单，不需要掌握 CSS3 的高级知识就可以学习。</li>     <li><strong><a href="/misc/goto?guid=4959735484429013143" rel="nofollow,noindex">使用 CSS Animations</a> </strong><br> 一个 CSS Animations 的基础教程。 如果你正在寻找开始 CSS 动画入门的地方，那么，这个教程非常适合你。</li>     <li><strong><a href="/misc/goto?guid=4959735484514620047" rel="nofollow,noindex">使用 CSS Transitions</a> </strong><br> 就像上面的教程一样，这个教程也是来自 Mozilla 开发者网络，旨在教你如何使用 CSS Transitions 。</li>     <li><strong><a href="/misc/goto?guid=4958827912749604087" rel="nofollow,noindex">四个简单的 CSS3 动画教程</a> </strong><br> 这个资源是由四个 CSS3 动画教程组合而成的。你可以了解如何使用 CSS3 动画中的四个方法： scale（） 、 translate（） 、 rotate（） 和 skew（） 。</li>     <li><strong><a href="/misc/goto?guid=4958534354011883541" rel="nofollow,noindex">CSS伪元素动画和转换示例教程</a> </strong><br> 本教程将为大家展示，在 CSS 动画和转换中使用伪元素的潜力—— ：before 和 ：after 。</li>     <li><strong><a href="/misc/goto?guid=4958537651046579475" rel="nofollow,noindex">使用 CSS3 动画制作 3D 条形图表</a> </strong><br> 这个高级教程，将为大家展示如何使用 CSS3 动画来创建 3D 条形图表。</li>    </ul>    <p>感谢你的阅读，如果觉得文章不错，不妨点个赞。</p>    <p>注：</p>    <ol>     <li>本文版权归原作者所有，仅用于学习与交流。</li>     <li>如需转载译文，烦请注明出处，谢谢！</li>    </ol>    <p> </p>    <p>来自：http://www.jianshu.com/p/31d6061cd263</p>    <p> </p>