1. CSS3Gen - CSS3动画生成器
CSS3Gen为您提供了一个易于使用的动画生成器，可以快速生成基本动画。 虽然你不能用它来完成复杂的作品，但如果你想毫不费力地创建一个标准的动画，这个工具将是一个不错的选择。
无需自动编写任何代码。 你只需要设置属性形式，预览结果，然后将符合期望的简单代码复制粘贴到你自己的CSS文件中。
CSS3Gen在线工具地址：
2.CSS动画
如果您需要更复杂的动画，您会发现 CSS Animate 特别有用。 它拥有更成熟的用户界面，允许您设置更多属性，还允许您通过直观的时间轴跟踪、停止或重播动画。 。
它还包含一些动画示例，例如“弹跳”、“振动”、“摇摆”等。您可以将此类动画加载到生成器中，然后根据需要更改代码。
CSS Animate在线工具地址：
3. Coveloping – CSS动画生成器
对于刚接触 CSS3 动画并想了解其工作原理的新手来说，Coveloping 的动画生成器可能是理想的选择。 这个简单而强大的工具可以帮助您测试所提供的不同类型的动漫并轻松衡量它们之间的差异。
只需要设置四个参数：动画类型、动画功能、持续多少秒、动画是否无限循环。 完成后，您可以获取生成的 HTML 和 CSS 代码。
覆盖在线工具地址：
4.魔法动画
Magic Animations 是一个很酷的 CSS 库，它还可以为您的网站带来许多动画效果。 例如，您可以使元素消失并重新出现、从右侧或侧面打开然后返回、向下、向上、向左、向右旋转等。
您所要做的就是将 CSS 文件下载到您的页面上，然后在 jQuery 的帮助下以以下形式添加适当的类：
$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});
您还可以借助 jQuery 更改计时器设置以实现动画无限循环（详细信息请参阅 readme 文件）
Magic Animations在线工具地址：
5.动画.css
Animate.css 提供了一组令人惊叹的跨浏览器 CSS3 动画。 动漫被分为不同的组，例如注意力寻求者、弹跳入口、弹跳退出、褪色入口，以及如此多不同的选择，因此很难责怪这种类型。 的短缺。
你可以从Github下载代码，然后你只需要把CSS文件添加到HTML页面中css3值，然后在HTML元素中引用你需要的动画的CSS类。
animate.css在线工具地址：
6.Bounce.js
Bounce.js 是一个方便的 JavaScript 库css3值，可让您创建复杂的动画。 它有非常成熟的用户界面，支持用户添加不同的组件，例如缓冲、持久化、延迟和不同的回调时间。 您可以自动处理动画。 您还可以从现成的动画中选择您需要的动画，然后调整属性。
Bounce.js在线工具地址：
7.AniJS
AniJS 是一个超炫的 JavaScript 库，支持在设计中添加 CSS3 动画，并创建动画选项卡、折叠线、模态窗口、滑动菜单、移动 APP 通知、滚动显示等复杂的 UI 组件。
它适用于所有现代浏览器，包括 iOS 和 Android，并且不需要任何第三方库。 此外，它还有一个名为AniCollection的显示窗口，通过它您可以体验不同的效果。
AniJS在线工具地址：
8.单元素 CSS Spinners
您想通过使用加载轮动画来改善设计的用户体验吗？ 如果答案是肯定的，那么这个帅气的 CSS 加载轮库可能是您的最佳选择。 这些装载轮的 CSS 代码是用 LESS 编写的。 所有代码都是现成的，不需要任何设置。 您只需将其插入您自己的 HTML 和 CSS 文件中。
Single Element CSS Spinners在线工具地址：
9.里程表
Odometer 是一款出色的工具，可将令人惊叹的动画移植到您的网站。 它是一个 CSS 和 JavaScript 库。 CSS部分是用Sass编写的。 您可以选择不同的主题，例如“数字”、“火车站”、“汽车”。
要使用里程表，您必须首先将 JavaScript 文件和选定的主题文件添加到 HTML 页面，然后在要设置动画的元素上使用 class="odometer" 选择器。 它非常适合可视化数据或创建引人注目的“即将推出”图像。
里程表在线工具地址：
10.Snabbt.js
Snabbt.js 是一个简单的动画库，可以帮助您轻松连接各地的元素。 如果您需要一点灵感，请查看这个智能动画工具可以为您做什么的演示。 屏幕截图中的动画元素周期表是使用 Snabbt.js 可以轻松实现的众多可能性之一。
如果你想使用这个库，你需要有一点 JavaScript 知识，但它带来的结果是惊人的，所以这个工具绝对物有所值。
福利来了！免费发放腾讯资深讲师的网页设计教程
