在開始介紹Animation之前我們有必要先來了解一個(gè)特殊的東西，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生。CSS3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果。由html5模板網(wǎng)提供HTML5+CSS3教程。下面我們一起先來看看Keyframes:
瀏覽器支持：
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。
Keyframes具有其自己的語法規(guī)則，他的命名是由"@keyframes"開頭，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比，我們分別給每一個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說移動(dòng)，改變?cè)仡伾恢茫笮。螤畹龋贿^有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束，也就是說這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話，我們這個(gè)keyframes是無效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。
二、具體屬性實(shí)例詳解：
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
animation-name:'wobble';/*動(dòng)畫屬性名，也就是我們前面keyframes定義的動(dòng)畫名*/
animation-duration: 10s;/*動(dòng)畫持續(xù)時(shí)間*/
animation-timing-function: ease-in-out; /*動(dòng)畫頻率，和transition-timing-function是一樣的*/
animation-delay: 2s;/*動(dòng)畫執(zhí)行延遲時(shí)間*/
animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無限次*/
animation-direction: alternate;/*定義動(dòng)畫方式*/
}
三、CSS3 animation實(shí)例應(yīng)用
實(shí)例動(dòng)畫CSS樣式：
.box{
animation:fly 5s linear 2s infinite alternate;
-webkit-animation:fly 5s linear 2s infinite alternate;
position:absolute;
top:100px;
left:20%;
background:#F00;
width:100px;
height:100px;
}
@keyframes fly { 0% {
top:100
}
50% {
top:140px
}
100% {
top:100
}
}
@-webkit-keyframes fly { 0% {
top:100
}
50% {
top:140px
}
100% {
top:100
}
}
</style>
實(shí)例動(dòng)畫HTML代碼：