編者按：今天@不到布?同學(xué)分享一款特別方便的神器，操作過(guò)程易學(xué)好懂，基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，有具體的教程呦，趕緊給自己補(bǔ)上這課吧。

@不到布?：自從CSS3引入了動(dòng)畫（transition和@keyframes，還有與之搭配的transform）之后，各路人馬對(duì)它的熱情都極為高漲，和JS動(dòng)畫相比，它寫起來(lái)更簡(jiǎn)單（在沒(méi)有jQuery庫(kù)的情況下），同時(shí)在大多數(shù)情況下性能上也有很強(qiáng)的優(yōu)勢(shì)。transition和transform相對(duì)比較簡(jiǎn)單，除了矩陣變換（一般人也用不到）之外，別的都易學(xué)好懂，而使用了@keyframes的動(dòng)畫，簡(jiǎn)直就是設(shè)計(jì)師和工程師的大殺器，關(guān)于這東西有多殺，可以參考之前騰訊的大神們搞的一個(gè)CSS3動(dòng)畫幀數(shù)科學(xué)計(jì)算法（http://tid.tenpay.com）這樣的玩意兒，內(nèi)含計(jì)算器（http://tid.tenpay.com）一枚，內(nèi)文之糾結(jié)復(fù)雜，我相信一般兼職半個(gè)前端的大設(shè)計(jì)或者初入行的小前端都是難以看懂的…

而且其實(shí)主要問(wèn)題是，那玩意兒是為步進(jìn)動(dòng)畫準(zhǔn)備的，做一張精靈圖，然后每隔一定時(shí)間跳一張…其實(shí)這樣算不上一個(gè)真正的css動(dòng)畫，何況animation屬性中的steps()功能可以比較好地解決這個(gè)問(wèn)題。而一直以來(lái)，都沒(méi)有一個(gè)好的css動(dòng)畫生成工具（別跟我提Muse，它需要閱讀《工具的自我修養(yǎng)》…）所以今天我想推薦的就是這個(gè)Stylie（http://jeremyckahn），一個(gè)可視化自動(dòng)生成CSS3動(dòng)畫的工具。

Stylie操作簡(jiǎn)介

頁(yè)面打開(kāi)以后很簡(jiǎn)單，藍(lán)色的網(wǎng)格背景上面，兩個(gè)綠色的十字中間連著一根黃色的線，上面有一個(gè)白色小球不斷地從左邊滑動(dòng)到右邊（還稱不上滾動(dòng)），下面有一個(gè)進(jìn)度條，右邊有一個(gè)操作面板。

圖片來(lái)自Tuts+

Keyframes標(biāo)簽面板

• 第一個(gè)0ms處表示起點(diǎn)相關(guān)信息，第二個(gè)2000ms處表示2000ms處斷點(diǎn)的相關(guān)信息；
• 2000ms可以單擊修改它的時(shí)間，單擊右上角的加號(hào)可以添加新的斷點(diǎn)
• X和Y分別表示橫坐標(biāo)及縱坐標(biāo)（其實(shí)你也可以用鼠標(biāo)去拖綠色的十字…）；
• S表示縮放倍率（默認(rèn)是1）；
• rX、rY、rZ分別表示物體沿X、Y、Z軸的旋轉(zhuǎn)角度（具體哪個(gè)軸是哪個(gè)可以在上面填寫數(shù)字自己嘗試，出于便于觀察的理由建議填寫180。當(dāng)然你也可以按住Shift鍵，拖，但是我覺(jué)得這樣很不好控制…）；
• linear表示線性的…這一欄是自定義緩動(dòng)曲線（Easing curves）

緩動(dòng)曲線

這個(gè)工具比較流弊刷刷的一點(diǎn)就在于它的緩動(dòng)曲線功能，所有的數(shù)值，都！可！以！定義緩動(dòng)。下面我稍微說(shuō)一下它的緩動(dòng)：

1. In和Out分別代表進(jìn)入時(shí)和結(jié)束時(shí)，緩動(dòng)顧名思義就是有一個(gè)類似“緩沖”的動(dòng)作，如同汽車加速是慢慢加起來(lái)的，人跑步也是慢慢停下的（急剎車也是很難從高速直接降速到靜止的，總有個(gè)減速的過(guò)程）。
2. Quad - x^2（二次方曲線）
3. Cubic - x^3（三次方曲線）
4. Quart - x^4（四次方曲線）
5. Quint - x^5（五次方曲線）
6. Sine - sin(x^(pi/2))（長(zhǎng)相有點(diǎn)像二次方曲線，實(shí)際上這個(gè)函數(shù)很奇葩，有興趣的童鞋可以移步這里（http://t.cn/RhdkXQC）看一下[0,3]的圖像…）
7. Expo - 2^(10(x-1))（我放棄起名字了，總之是一個(gè)開(kāi)始非常非常慢，中后期非常非?？斓臇|西）
8. Circ - 顧名思義就是弧（1/4圓，如果選擇了InOut就是兩個(gè)外切的1/4圓）
9. Bounce - 公式太長(zhǎng)不寫了，就是個(gè)反彈曲線（彈簧效果、小球落地）
   v10. Back -反彈曲線
10. elastic - 橡皮筋曲線（有一個(gè)非常短暫且巨大的晃動(dòng)，然后緩緩結(jié)束）
11. swing - 跟Back系列一樣
12. 后面的就沒(méi)什么了，最后一個(gè)為CustomEasing，這個(gè)曲線可以自己在Motion選項(xiàng)卡中編輯，經(jīng)常用AI的童鞋可能比較容易編輯，但是不理解曲線跟運(yùn)動(dòng)速度之間的關(guān)系的話，就根本搞不懂自己在編輯什么…

上面說(shuō)了那么多曲線…它其實(shí)代表的就是一個(gè)速率的變化（可以把起點(diǎn)和終點(diǎn)放在非水平或垂直的同一條直線位置上，然后改變X和Y的Easing Curves，本質(zhì)上它和我們初高中物理課上畫的那些撞車線拋物線沒(méi)什么不同…）。對(duì)于那些想預(yù)覽簡(jiǎn)單微小動(dòng)效的人來(lái)說(shuō)，可以把起點(diǎn)和終點(diǎn)放在比較近的位置上，然后改變Easing curves察看效果。

導(dǎo)出代碼

效果滿意之后，就可以點(diǎn)擊CSS和HTML標(biāo)簽分別復(fù)制代碼了。

CSS標(biāo)簽中可以為這個(gè)動(dòng)畫自定義名字，并選擇瀏覽器兼容性（默認(rèn)為W3C，如果你家要考慮兼容其實(shí)還不如不要做（對(duì)我說(shuō)的就是那誰(shuí)，你們懂）…兼容手機(jī)的話可以考慮勾上Webkit）。Orient generated CSS to的意思是說(shuō)所有的位移數(shù)據(jù)采用相對(duì)（第一幀的）位移，還是絕對(duì)定位（相對(duì)于左上角）。最下面的滑塊，最左邊是最少代碼，右邊是最高質(zhì)量，最小代碼可能會(huì)在某些情況下引發(fā)意想不到的問(wèn)題，但是通常情況下沒(méi)啥事…

HTML標(biāo)簽就沒(méi)啥東西了，你可以修改其中的html代碼來(lái)查看你自定義的內(nèi)容效果（默認(rèn)只有一個(gè)圖片，就是那個(gè)白色的圓…）

最后在右邊的扳手標(biāo)簽里，你可以選擇保存或讀取你的動(dòng)畫。

差不多就是這樣了，這個(gè)神器基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，具體怎么做就看各人的實(shí)力運(yùn)氣了。

【超好用的設(shè)計(jì)師神器推薦】

一秒鐘轉(zhuǎn)矢量圖！就這么簡(jiǎn)單！
《一秒鐘位圖轉(zhuǎn)矢量！超級(jí)好用的轉(zhuǎn)矢量軟件VECTOR MAGIC》

好評(píng)如潮！幫你快速解決GIF圖神器鋸齒問(wèn)題！
《超實(shí)用神器！幫設(shè)計(jì)師快速解決GIF圖的鋸齒問(wèn)題》

從設(shè)計(jì)到切圖一氣呵成的UI設(shè)計(jì)師效率提成利器！
《神器推薦！幫你輕松高效輸出標(biāo)注切圖的PXCOOK！》

原文地址：hikarievo.me
作者：@不到布

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege