-webkit-animation:仍舊是一個複合屬性,web
-webkit-animation: name duration timing-function delay iteration_count direction;post
包括如下幾個屬性測試
(1) -webkit-animation-name 這個屬性的使用必須結合@-webkit-keyframes一塊兒使用動畫
eg: @-webkit-keyframes fontchange{orm
0%{font-size:10px;}blog
30%{font-size:15px;}animation
100%{font-siez:12px;}it
}io
百分比的意思就是duration的百分比,若是沒有設置duration的話,則表示爲無窮大function
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>