通過(guò) CSS3，我們能夠創(chuàng)建動(dòng)畫(huà)，這可以在許多網(wǎng)頁(yè)中取代動(dòng)畫(huà)圖片、Flash 動(dòng)畫(huà)以及 JavaScript。

CSS3 動(dòng)畫(huà)

CSS3 @keyframes 規(guī)則
如需在 CSS3 中創(chuàng)建動(dòng)畫(huà)，您需要學(xué)習(xí) @keyframes 規(guī)則。

@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà)。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果。

瀏覽器支持
屬性    瀏覽器支持
@keyframes                    
animation                    
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注釋?zhuān)篒nternet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。

實(shí)例
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} } 

CSS3 動(dòng)畫(huà)
當(dāng)您在 @keyframes 中創(chuàng)建動(dòng)畫(huà)時(shí)，請(qǐng)把它捆綁到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫(huà)效果。

通過(guò)規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫(huà)屬性，即可將動(dòng)畫(huà)綁定到選擇器：

規(guī)定動(dòng)畫(huà)的名稱(chēng)
規(guī)定動(dòng)畫(huà)的時(shí)長(zhǎng)
實(shí)例
把 "myfirst" 動(dòng)畫(huà)捆綁到 div 元素，時(shí)長(zhǎng)：5 秒：

div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }