在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西并不會陌生。CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。由html5模板網提供HTML5+CSS3教程。下面我們一起先來看看Keyframes:
瀏覽器支持：
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。
Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當于"0%"而"to"相當于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這里必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。
二、具體屬性實例詳解：
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
animation-name:'wobble';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
animation-duration: 10s;/*動畫持續時間*/
animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/
animation-delay: 2s;/*動畫執行延遲時間*/
animation-iteration-count: 10;/*定義循環資料，infinite為無限次*/
animation-direction: alternate;/*定義動畫方式*/
}
三、CSS3 animation實例應用
實例動畫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>
實例動畫HTML代碼：