-webkit-animation [CSS3]

-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的話，則表示為無窮大。

( 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>