CSS3 @keyframes 規(guī)則
要?jiǎng)?chuàng)建CSS3動(dòng)畫，你將不得不了解@keyframes規(guī)則。
@keyframes規(guī)則是創(chuàng)建動(dòng)畫。 @keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。

當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：
規(guī)定動(dòng)畫的名稱 myfirst
規(guī)定動(dòng)畫的時(shí)長(zhǎng) 默認(rèn)是0（要?jiǎng)赢媹?zhí)行必須設(shè)置有效時(shí)間）

@keyframes myfirst{
from {background: red;} //from可以被0%取代
to {background: yellow;} //to可以被100%取代
}

@-webkit-keyframes myfirst /* Safari 與 Chrome */{
from {background: red;} //from可以被0%取代
to {background: yellow;} //to可以被100%取代

}

div{ animation: myfirst 5s;
-webkit-animation: myfirst 5s;
/* Safari 與 Chrome */}

CSS3動(dòng)畫是什么？
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。
為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。