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í)長 默認(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ù)婆咸。
請用百分比來規(guī)定變化發(fā)生的時(shí)間芜辕，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%侵续。
0% 是動(dòng)畫的開始憨闰，100% 是動(dòng)畫的完成鹉动。
為了得到最佳的瀏覽器支持宏邮，您應(yīng)該始終定義 0% 和 100% 選擇器。
