css3 animation動畫技巧

一,css3 animation動畫前言

　　隨着如今瀏覽器對css3的兼容性愈來愈好，使用css3動畫來製做動畫的例子也愈來愈普遍，也隨着而來帶來了許多的問題值得咱們能思考。css3動畫如何讓物體運動更順暢，css3動畫如何作弧線動畫，css3動畫是否有動畫庫，css3幀動畫如何快速簡單……   爲了解決這些折磨人的問題，咱們今天來分析一下:

　　首先介紹css3 Animation動畫庫：

　　http://daneden.github.io/animate.css/

　　基本涵蓋了咱們常見的基礎css3動畫，有時作css3動畫沒有靈感或者須要快速製做時，咱們能夠套用裏面的css3幀動畫，簡單粗暴。

　　http://leaverou.github.io/animatable/ 這個是github玩家寫的一個經常使用的hover animation動畫

 

　　css3 Animation在線調節工具：

　　http://melonh.com/animationGenerator/              基於chrome的插件，能夠快速調節頁面上的動畫

　　http://isux.tencent.com/css3/tools.html               騰訊isux一款很是強大的動畫工具

　   http://tid.tenpay.com/labs/css3_keyframes_calculator.html           財付通的幀動畫調節工具

 

　　自定義transition-timing-function中的cubic-bezier參數:

　　http://cubic-bezier.com/

　　http://matthewlein.com/ceaser/

 

二,css3 animation動畫技巧

　　1.animation-direction讓動畫變得更圓滑：

　　　　animation-direction 屬性定義是否應該輪流反向播放動畫。

　　　　若是 animation-direction 值是 "alternate"，則動畫會在奇數次數（一、三、5 等等）正常播放，而在偶數次數（二、四、6 等等）向後播放。

　　　　語法：

　　　　animation-direction: normal|alternate;

值	描述	測試
normal	默認值。動畫應該正常播放。	測試
alternate	動畫應該輪流反向播放。	測試

　　　　animation-direction 值是 "alternate"屬性實現雙向循環的效果，能夠很好的優化，咱們自己用animation幀寫的雙向循環，緣由在於瀏覽器自動實現的雙向循環，比人爲手工要好的多。

　　2.animation-fill-mode動畫結束和開始時設置保持的動畫：

　　　　animation-fill-mode 屬性規定動畫在播放以前或以後，其動畫效果是否可見，主要用來實現，咱們動畫結束和開始時咱們想保留的狀態。

　　　語法

　　　　animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改變默認行爲。
forwards	當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向後填充模式都被應用。

　　3.0%用from表明，100%用to，設置cubic-bezier出現的問題：

　　　　這裏面，給你們區分一個誤區，一般咱們寫動畫是這樣的:

@keyframes rotate{
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
    from{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}
看看這二者的區別

　　可能對不少人來講，認爲這種中0%能夠用from，100%能夠用to，二者是等價的，其實我然，當咱們設置cubic-bezier，就會發現問題，有些手機的元素顯示不出來。

@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    form{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}

　　這二者真的是不能全等， 已經踩過不少坑了。

 

　　4.動畫原則：

　　　　這裏有點要注意的是，咱們作動畫的元素，請儘可能使用絕對定位，從而避免重繪重排的問題。

　　　　這裏推薦幾個作動畫的原則：

　　　　動畫十四原則: http://www.sunnyzhen.com/course/animation_principles/demo.html

　　　　動畫十二原則：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

　　5.圖片雪碧圖致使動畫問題：

　　　　若是單張雪碧圖面積實在太大，能夠拆分雪碧圖，例如拆分紅2-4張，由於現代瀏覽器都支持4-6個同源請求下載，若資源實在太多，也能夠考慮把靜態資源放在不一樣源域名下去請求，這裏犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，固然，這須要具體狀況去衡量。

　　　　還有一點就是咱們作動畫是總想把圖片都集中在一直圖片，結果致使圖片高度太高，超過3000px，就會致使在部分手機圖片失真或者是看不到等現象。

　　　　如今，也愈來愈多的夥伴用rem來處理移動端，實現縮放的問題，建議作雪碧圖時要增長空隙，最好的空隙是除以4仍是整數。

　　6.base64位使用時注意事項：

　　　　使用base64:URL的優缺點
　　　　　　base64:URL傳輸圖片文件的好處在於：
　　　　　　　　減小了HTTP請求
　　　　　　　　某些文件能夠避免跨域的問題
　　　　　　　　沒有圖片更新要從新上傳，還要清理緩存的問題
　　　　　 不足在於：
　　　　　　　　瀏覽器支持使用base64編碼圖片做爲背景圖片的這種技術IE6/IE7瀏覽器是不支持的（IE9瀏覽器IE7模式下支持。對於目前PC頁面，兼容性問題使沒有文件上傳以及無需更新緩存的優勢不存在了。
　　　　　　　　增長了CSS文件的尺寸base64編碼圖片本質上是將圖片的二進制大小以一些字母的形式展現，例如一個1024字節的圖片，base64編碼後至少1024個字符，這個大小會被徹底嵌入到CSS文件中（不過幸運的是也能夠被gzip了，而圖片文件被gzip效果不明顯）。
　　　　　　　　編碼成本圖片完成後還須要base64編碼，目前估計手工完成的多，所以，增長了必定的工做量，雖然很少。

　　　　　　圖片這裏還有一點要注意，移動端，咱們常常作圖片加載器，而後樣式裏面咱們也有圖片還有時間戳，這裏咱們必定要保持時間戳一直，否則會嚴重致使加載時間變長，由於不一樣的時間戳，會致使再次去請求確認浪費時間。

　　　　　　優缺點權衡下的實際應用價值

　　　　　　　權衡上面所展現的優缺點，貌似base64:URL圖片沒有什麼用武之地啊，實際上非也，有一種狀況時有base64編碼做爲background-image背景圖片利要遠大於弊的。何種狀況呢？
　　　　　　　在web頁面製做的時候，因爲某些現實緣由，咱們能夠會用到下面這一類圖片：
　　　　　　　　　　這類圖片不能與其餘圖片以CSS Sprite的形式存在，只能獨行
　　　　　　　　　　這類圖片從誕生之日起，基本上不多被更新
　　　　　　　　　　這類圖片的實際尺寸很小
　　　　　　　　　　這類圖片在網站中大規模使用

　　　　　還有一點比較重要，就是就是不用這樣合併寫帶有base64位圖片background:url(base64:sdfsdfsd )  center center /20px 20px  no-repeat;，這樣會致使安卓機沒法顯示，這種狀況可能不少時候在壓縮的時候出現。

 

　　　　　這裏再說一個移動端border-radius的bug，一般咱們畫圓用border-radius：50%； 但我發如今低版本手機裏面的qq瀏覽器不支持，只支持具體的數值px

 

　　推薦騰訊isux的兩篇文章:

　　http://isux.tencent.com/play-with-html5-animate.html

　　http://isux.tencent.com/play-with-html5-optimize.html

 　 CSS3的calc()使用   http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html