css3——webkit-animation動畫

-webkit-animation:仍舊是一個複合屬性，

 

-webkit-animation: name duration timing-function delay iteration_count direction;

 

包括如下幾個屬性

 

（1）  -webkit-animation-name    這個屬性的使用必須結合@-webkit-keyframes一塊兒使用

 

eg:  @-webkit-keyframes fontchange{

 

0%{font-size:10px;}

 

30%{font-size:15px;}

 

100%{font-siez:12px;}

 

}

 

百分比的意思就是duration的百分比，若是沒有設置duration的話，則表示爲無窮大

 

div{ -webkit-animation-name:fontchange;}

 

（2）-webkit-animation-duration   表示動畫持續的時間

 

（3）-webkit-animation-timing-function  表示動畫使用的時間曲線

 

【語法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

 

（4）-webkit-animation-delay    表示開始動畫以前的延時

 

【語法】 -webkit-animation-delay: delay_time;

 

（5）-webkit-animation-iteration-count  表示動畫要重複幾回

 

【語法】-webkit-animation-iteration-count: times_number;

 

（6） -webkit-animation-direction   表示動畫的方向

 

【語法】-webkit-animation-direction: normal(默認)  | alternate

 

normal  方向始終向前

 

alternate 當重複次數爲偶數時方向向前，奇數時方向相反

 

【另外】跟animation有關的其餘屬性

 

（1）-webkit-animation-fill-mode : none (默認)| backwards | forwards | both  設置動畫開始以前和結束以後的行爲（測試結

 

果不是很清晰）

 

（2）-webkit-animation-play-state: running（默認） | paused  設置動畫的運行狀態

 

綜合案例：

 

@-webkit-keyframes fontbulger {

0% {

font-size: 10px;

}

30% {

font-size: 15px;

}

100% {

font-size: 12px;

}

}

 

#box {

-webkit-animation-name:  fontbulger;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count:3;

-webkit-animation-direction: alternate;

-webkit-animation-timing-function: ease-out;

-webkit-animation-fill-mode: both;

-webkit-animation-delay: 2s;

}

 

<div id=」box」>文字變化</div>