動畫本質上是增強的過渡
動畫分兩部分，即動畫屬性定義動畫形式，第二部分使用@key-frames規則建立，定義動畫是什麼樣的
1.瀏覽器支援情況
internet explorer 10、firefox 以及 opera 支援 animation 屬性。
safari 和 chrome 支援替代的 -webkit-animation 屬性。
注釋：internet explorer 9 以及更早的版本不支援 animation 屬性。
2.動畫屬性
animation-delay 設定動畫開始前的延遲，值為時間，單位ms
animation-name 指定動畫名稱 none或字串
animation-timing-function 中間值，類似過渡
animation 簡寫屬性
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count
3.@key-frames
目前瀏覽器都不支援 @keyframes 規則。
firefox 支援替代的 @-moz-keyframes 規則。
opera 支援替代的 @-o-keyframes 規則。
safari 和 chrome 支援替代的 @-webkit-keyframes 規則。
用法：建立動畫的原理是，將一套 css 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 css 樣式。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。
語法：
@keyframes animationname }值
描述animationname
必需。定義動畫的名稱。
keyframes-selector
必需。動畫時長的百分比。
合法的值：
css-styles
必需。乙個或多個合法的 css 樣式屬性。
注：與過渡相比，動畫的乙個優勢是你可以將其應用到初始布局，即頁面已載入就可以產生動畫。
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...