CSS3新特性+less實驗——animation，css3animation
自從CSS3推出animation以來，一大批H5應用紛紛利用animation來製作以往需要JS或FLASH才能製作出的特效。今天就來看看animation的廬山真面目吧。
實驗對象：animation文法animation可以被用來定義一組動畫效果，此效果可以被應用在任何元素之上，並且可以通過它提供的各項參數精確控制動畫的細節。
說明animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
animation-name：動畫名稱，必須與@keyframes配合使用，所有動畫由@keyframes單獨定義，在元素樣式中通過animation-name來調用
animation-duration:指定動畫的期間，單位s或ms
animation-timing-function :指定過渡類型，即速度雖時間的變化幅度，取值範圍與transform的timing-function一樣。
animation-delay:定義動畫開始前的延遲時間，單位s或ms
animation-iteration-count ：指定動畫迴圈次數。值可以為數字，也可以為infinite代表無限迴圈
animation-direction:動畫進行的方向，取值為normal[正常方向]和alternate[正常與反向交替]
@keyframes：此屬性單獨使用，不在元素樣式中，以下是一個樣本：
@-webkit-keyframes animations{ 0%{-webkit-transform:translate(0,0);} 50%{-webkit-transform:translate(100px,100px);} 100%{-webkit-transform:translate(100px,0);}}執行個體我們看到，它的基本格式為：
@-瀏覽器首碼-keyframes 動畫名稱{
0% {這裡定義一些transform效果}
50% {這裡定義一些transform效果}
100% {這裡定義一些transform效果}
……
}
這裡的百分比表示的是時間的長度，總長度為animation-duration裡定義的時間。
HTML由於@keyframes定義起來太過繁瑣，還包括要相容不同的瀏覽器，所以這裡我們直接推薦一些成熟的animation組件——animate.css，免去了大家編寫@keyframes效果的麻煩，當然，如果要做出更精緻的動畫來，在大家熟悉該屬性的用法後就可以自己定義吊炸天的動畫效果了。
animate.css官網下載
…… <title>CSS3新特性實驗——animation</title> <link rel="stylesheet" href="animate.css" type="text/css"/> <link rel="stylesheet" href="style.css" type="text/css"/></head><body> <div class="content"> <div class="box1"></div> </div></body></html>less這裡要注意，animate.css要在style.css之前引入，這也是所有前端製作中應該遵循的規則：外掛程式在自訂樣式與指令碼之前引入，防止外掛程式樣式和指令碼覆蓋自訂樣式和指令碼，並且自訂樣式要調用外掛程式中的樣式，所以要確保外掛程式在自訂樣式之前載入，才能保證調用時可以找到相關對象。
.animation(@n:fly,@t:2s,@fn:ease-in-out,@i:infinite,@dur:alternate){ animation: @n @t @fn @i @dur; -webkit-animation: @n @t @fn @i @dur; -o-animation: @n @t @fn @i @dur; -moz-animation: @n @t @fn @i @dur;}.content { width: 1400px; height: 600px; border: 2px solid #ccc; margin-top: 100px; margin-left: 100px;}.box { width: 100px; height: 100px; background: blue; float: left; margin-right: 100px;}.box1{ .box; .animation(slideOutUp);}.content { width: 1400px; height: 600px; border: 2px solid #ccc; margin-top: 100px; margin-left: 100px;}.box { width: 100px; height: 100px; background: blue; float: left; margin-right: 100px;}.box1 { width: 100px; height: 100px; background: blue; float: left; margin-right: 100px; animation: slideOutUp 2s ease-in-out infinite alternate; -webkit-animation: slideOutUp 2s ease-in-out infinite alternate; -o-animation: slideOutUp 2s ease-in-out infinite alternate; -moz-animation: slideOutUp 2s ease-in-out infinite alternate;}animate.css中的slideOutUp動畫定義部分：
@-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }}@keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }}動畫開始0.5s時的狀態
動畫開始後0.8s時的狀態
動畫開始後1.2s時的狀態
動畫開始後1.6s時的狀態
動畫開始後2.1s時的狀態
為了方便大家看清楚動畫的變化過程與時間的關係，我特意在頁面加入了秒錶計時器。從最終效果我們可以看出：
1、我們設定的動畫時間為2s，而動畫slideOutUp裡定義時間100%時元素運動到自身高度的100%的反方向處（ transform: translate3d(0, -100%, 0);），這裡元素高度為100px,所以它在2秒時運動到相對自己-100px的地方，然後開始恢複到原始狀態。
2、效果我們可以看出，從0-0.8s,元素運動的幅度佔到整個運動幅度的40%，從0.8s-1.2s的運動佔了整個運動幅度的40%，而從1.2s到2.0s，只運動了整個運動幅度的20%，這個就是因為我們設定了timing-function為ease-in-out。(由慢到快再到慢)，大家可以自己改為其他過渡方式看看又會是怎樣的效果。
3、我們這裡動畫方向設定為交替進行，所以元素恢複到初始狀態時也是平滑過渡的，但是如果將動畫方向設定為normal，在元素運動到-100px後，就會很生硬的瞬間跳回到初始位置，這個大家可以自己做實驗驗證啦，大家還可以把動畫進行的次數改為1試試看有什麼效果。
好啦，animation就講到這裡啦，其他各種效果其實就是不同參數組合的結果，千變萬化，不離其宗，通過本文掌握了基本原理和寫法，其他的就 so easy啦。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
