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

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

1、?Animate.css

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

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

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

2、Stylie

Stylie 是一個(gè)可視化的 CSS3 動(dòng)畫(huà)工具，你可以使用它來(lái)配置和生成專屬的動(dòng)畫(huà)合集。

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

3、?Motion UI

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

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

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

4、?CSS Shake

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

5.?Magic Animations

Magic Animations 是一個(gè)具備獨(dú)特的 CSS3 動(dòng)畫(huà)特效的小型庫(kù)。

6.?Hover.css

Hover.css 是一套基于 CSS3 的鼠標(biāo)懸停效果動(dòng)畫(huà)庫(kù)。

7.?Saffron

Saffron 是一個(gè)簡(jiǎn)單的 CSS3 動(dòng)畫(huà)和轉(zhuǎn)換的 Sass mixin 庫(kù)。

8.?CSSynth

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

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

9.?Anima

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

10.?Rocket

Rocket 是一個(gè)用于創(chuàng)建網(wǎng)頁(yè)動(dòng)畫(huà)的簡(jiǎn)單工具。

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