CSS3 @keyframes 規(guī)則


實例

使一個div元素逐漸移動200像素：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

嘗試一下 ?
在此頁底部有更多的例子。

瀏覽器支持

屬性
@keyframes 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

標簽定義及使用說明

使用@keyframes規(guī)則，你可以創(chuàng)建動畫。

創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。

在動畫過程中，您可以更改CSS樣式的設(shè)定多次。

指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。

0％是開頭動畫，100％是當動畫完成。

為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。

注意: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。.

語法

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

值 說明
animationname 必需的。定義animation的名稱。
keyframes-selector 必需的。動畫持續(xù)時間的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

注意： 您可以用一個動畫keyframes-selectors。
css-styles 必需的。一個或多個合法的CSS樣式屬性

Examples

在線實例


實例

許多關(guān)鍵幀選擇器中添加一個動畫：

@keyframes mymove
{
0%?? {top:0px;}
25%? {top:200px;}
50%? {top:100px;}
75%? {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%?? {top:0px;}
25%? {top:200px;}
50%? {top:100px;}
75%? {top:200px;}
100% {top:0px;}
}

嘗試一下 ?

實例

Change many CSS styles in one animation:

@keyframes mymove
{
0%?? {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%?? {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

嘗試一下 ?

實例

Many keyframe selectors with many CSS styles:

@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;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}

嘗試一下 ?

相關(guān)文章

CSS3 tutorial: CSS3 動畫