例
做一個元素移動逐漸下降200像素：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
試一試» 更多"Try it Yourself"下面的例子。
定義和用法
該@keyframes規則指定動畫代碼。
動畫是由一組CSS樣式到另一個逐漸改變創建。
在動畫，可以改變設置的CSS樣式很多次。
指定當風格變化會發生在百分之，或用關鍵字"from"和"to" ，這是一樣的0％和100％。 0％是動畫開始，在動畫完成的時候是100％。
提示：為了獲得最佳的瀏覽器支持，你應該總是同時定義為0％和100％的選擇。
Note:使用動畫屬性來控制動畫的外觀，並且還向動畫選擇器結合。
瀏覽器支持
在表中的數字規定，完全支持該規則的第一個瀏覽器版本。
其次是-webkit-，-moz-數字或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -O- |
CSS語法
@keyframesanimationname {keyframes-selector {css-styles;}}屬性值
| 值 | 描述 |
|---|---|
| animationname | 需要。 定義動畫的名稱。 |
| keyframes-selector | 需要。 動畫持續時間的百分比。 合法值： 0-100％ Note:您可以有很多的關鍵幀，選擇在一個動畫。 |
| css-styles | 需要。 一個或多個法律CSS樣式屬性 |
更多示例
例
添加關鍵幀很多在選擇一個動畫：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
試一試» 例
改變許多CSS樣式於一體的動畫：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
試一試» 例
許多關鍵幀選擇與許多CSS樣式：
/* Chrome, Safari, Opera */
@-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;}
}
/* Standard syntax */
@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;}
}
試一試» 相關頁面
CSS3教程： CSS3動畫