移动H5开发工具：10个在线预览CSS3动画工具

现在移动H5的开发越来越频繁，而且移动端的动画插件也很多，为了实现很酷炫的动画效果，有些时候需要借助一些成熟的CSS 动画工具或者是纯CSS动画框架。

今天25学堂就跟大家分享10个在线预览CSS3动画工具。让大家在线预览和调试出好的css动画。

1、 Animate.css

Animate.css 是一个跨浏览器 CSS 动画的集合，你可以在滚动条、主页上等 Web 项目中使用它。特别是最近火的微信小程序上的css动画。

CSS3动画预览官网：https://daneden.github.io/animate.css/

根据你选择的动画选项来预览你想要的动画效果。也是目前移动H5开发项目当中最常用的css动画框架。

2、Stylie

Stylie 是一个可视化的 CSS3 动画工具，你可以使用它来配置和生成专属的动画合集。

CSS3动画预览效果官网：http://jeremyckahn.github.io/stylie/

3、 Motion UI

Motion UI 是一个用于创建灵活的 CSS 转换和动画的 Sass 库。

只需要你点击左边的css动画参数即可让右边的 卡通人物 进行各种动画效果。非常直观。

在线预览CSS3动画官网：http://zurb.com/playground/motion-ui

4、 CSS Shake

CSS Shake 是一套 CSS3 实现的动画特效，它可以让页面的 DOM 元素实现各种抖动效果。

5. Magic Animations

Magic Animations 是一个具备独特的 CSS3 动画特效的小型库。

6. Hover.css

Hover.css 是一套基于 CSS3 的鼠标悬停效果动画库。

7. Saffron

Saffron 是一个简单的 CSS3 动画和转换的 Sass mixin 库。

8. CSSynth

CSSynth 是一个可在线运行动画的应用程序。

在线预览CSS3动画效果的官网：http://bennettfeely.com/cssynth/

9. Anima

轻量级（当 gzip 压缩时只有 5 k）Anima 允许你同时对多个对象进行动画处理，而每个项目都可以通过质量和密度来模拟现实生活中的物体。 同时，你可以利用 CSS 变换和 3D 变换与 JavaScript 一起创建动画。

10. Rocket

Rocket 是一个用于创建网页动画的简单工具。

在线预览CSS动画效果的官网：https://minimamente.com/example/rocket/