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

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

1、?Animate.css

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

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

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

2、Stylie

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

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

3、?Motion UI

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

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

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

4、?CSS Shake

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

5.?Magic Animations

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

6.?Hover.css

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

7.?Saffron

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

8.?CSSynth

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

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

9.?Anima

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

10.?Rocket

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

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