怎么在CSS3中使用Animation動畫屬性
本篇文章為大家展示了怎么在CSS3中使用Animation動畫屬性，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)專注于紅安企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。紅安網(wǎng)站建設(shè)公司,為紅安等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
要使用animation動畫，先要熟悉一下keyframes,Keyframes的語法規(guī)則:命名是由”@keyframes”開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規(guī)則。不同關(guān)鍵幀是通過from（相當(dāng)于0%）、to（相當(dāng)于100%）或百分比來表示（為了得到最佳的瀏覽器支持，建議使用百分比），如下定義一個簡單的動畫：
@keyframes myfirst /*定義動畫名*/ { 0% {background:red; left:0px; top:0px;} /*定義起始幀樣式，0%可以換成from*/ 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} /*定義結(jié)束幀樣式，100%可以換成to*/ }
@keyframes定義好了，要使其能發(fā)揮效果，必須通過animation把它綁定到一個選擇器，否則動畫不會有任何效果。下面列出了animation的屬性：
下面設(shè)置上述的所有屬性
CSS Code復(fù)制內(nèi)容到剪貼板
animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:1s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running;
上述所有代碼可以如下簡寫：
CSS Code復(fù)制內(nèi)容到剪貼板
animation:myfirst 5s linear 2s infinite alternate;
animation-play-state:running;
瀏覽器兼容性
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。
animation演示 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。