用CSS3實作動畫效果：
@keyframes和animation共同實作。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
綁定到div控件，設定綁定動畫的名稱和持續時長。
div{
animation:first 5s;
-webkit-animation:first 5s;
}
| @keyframes | 規定動畫。 | 3 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。預設是 "ease"。 | 3 |
| animation-delay | 規定動畫何時開始。預設是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。預設是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。預設是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運作或暫停。預設是 "running"。 |
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}