CSS3 動畫

通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

CSS3 動畫

CSS3 @keyframes 規則
如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

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

Chrome 和 Safari 需要前綴 -webkit-。

注釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

實例
@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 動畫
當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱
規定動畫的時長
實例
把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：

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