CSS3 @keyframes 用法（簡單動畫實現）

定義：

通過 @keyframes 規則，能夠創建動畫。

創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動畫過程中，可以多次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

為了獲得最佳的瀏覽器支持，應始終定義 0% 和 100% 選擇器。

重要：兼容問題！@keyfrmes 不兼容IE 9 and 以及更早版本的瀏覽器.

語法：

@keyframes animationname {keyframes-selector {css-styles;}}

 

animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。 合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-webkit-keyframes mymove /* Safari and Chrome */
{ 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} }
//多個特性變化，用;隔開.

@-webkit-keyframes mymove{

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

使用mymove動畫方法：

選擇器 { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無限次循環，也可設置次數n：
 animation-interation-count:n*/ 
}

總結：@keyframes與animation密切相關，如想透徹掌握，還需對照animation用法一起學習。