@-webkit-keyframes?name{

}

-webkit-animation :?name ?duration ?iteration-count ?direction ?timing-function ?fill-mode ?delay

或者

@-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;
}

? ??

-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? 設置動畫的運行狀態

總結

以上是生活随笔為你收集整理的CSS3 -webkit-animation(动画)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。