css3——webkit-animation動畫

標籤：io   使用   ar   for   div   cti   sp   on   時間   

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

css3——webkit-animation動畫