現(xiàn)在移動H5的開發(fā)越來越頻繁，而且移動端的動畫插件也很多，為了實現(xiàn)很酷炫的動畫效果，有些時候需要借助一些成熟的CSS 動畫工具或者是純CSS動畫框架。

今天25學(xué)堂就跟大家分享10個在線預(yù)覽CSS3動畫工具。讓大家在線預(yù)覽和調(diào)試出好的css動畫。

1、?Animate.css

Animate.css 是一個跨瀏覽器 CSS 動畫的集合，你可以在滾動條、主頁上等 Web 項目中使用它。特別是最近火的微信小程序上的css動畫。

CSS3動畫預(yù)覽官網(wǎng)：https://daneden.github.io/animate.css/

根據(jù)你選擇的動畫選項來預(yù)覽你想要的動畫效果。也是目前移動H5開發(fā)項目當(dāng)中最常用的css動畫框架。

2、Stylie

Stylie 是一個可視化的 CSS3 動畫工具，你可以使用它來配置和生成專屬的動畫合集。

CSS3動畫預(yù)覽效果官網(wǎng)：http://jeremyckahn.github.io/stylie/

3、?Motion UI

Motion UI 是一個用于創(chuàng)建靈活的 CSS 轉(zhuǎn)換和動畫的 Sass 庫。

只需要你點擊左邊的css動畫參數(shù)即可讓右邊的 卡通人物 進(jìn)行各種動畫效果。非常直觀。

在線預(yù)覽CSS3動畫官網(wǎng)：http://zurb.com/playground/motion-ui

4、?CSS Shake

CSS Shake 是一套 CSS3 實現(xiàn)的動畫特效，它可以讓頁面的 DOM 元素實現(xiàn)各種抖動效果。

5.?Magic Animations

Magic Animations 是一個具備獨特的 CSS3 動畫特效的小型庫。

6.?Hover.css

Hover.css 是一套基于 CSS3 的鼠標(biāo)懸停效果動畫庫。

7.?Saffron

Saffron 是一個簡單的 CSS3 動畫和轉(zhuǎn)換的 Sass mixin 庫。

8.?CSSynth

CSSynth 是一個可在線運(yùn)行動畫的應(yīng)用程序。

在線預(yù)覽CSS3動畫效果的官網(wǎng)：http://bennettfeely.com/cssynth/

9.?Anima

輕量級（當(dāng) gzip 壓縮時只有 5 k）Anima 允許你同時對多個對象進(jìn)行動畫處理，而每個項目都可以通過質(zhì)量和密度來模擬現(xiàn)實生活中的物體。 同時，你可以利用 CSS 變換和 3D 變換與 JavaScript 一起創(chuàng)建動畫。

10.?Rocket

Rocket 是一個用于創(chuàng)建網(wǎng)頁動畫的簡單工具。

在線預(yù)覽CSS動畫效果的官網(wǎng)：https://minimamente.com/example/rocket/