@keyframes

實(shí)例

使一個(gè)div元素逐漸移動(dòng)200像素：

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

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

運(yùn)行代碼 ?
在此頁(yè)底部有更多的例子。

瀏覽器支持

屬性
@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-

標(biāo)簽定義及使用說(shuō)明

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

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

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

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

0％是開(kāi)頭動(dòng)畫(huà)，100％是當(dāng)動(dòng)畫(huà)完成。

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

注意: 使用animation屬性來(lái)控制動(dòng)畫(huà)的外觀，還使用選擇器綁定動(dòng)畫(huà)。.

語(yǔ)法

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

值	說(shuō)明
animationname	必需的。定義animation的名稱。
keyframes-selector	必需的。動(dòng)畫(huà)持續(xù)時(shí)間的百分比。合法值： 0-100% from (和0%相同) to (和100%相同) 注意：您可以用一個(gè)動(dòng)畫(huà)keyframes-selectors。
css-styles	必需的。一個(gè)或多個(gè)合法的CSS樣式屬性

值

說(shuō)明

animationname

必需的。定義animation的名稱。

keyframes-selector

必需的。動(dòng)畫(huà)持續(xù)時(shí)間的百分比。

合法值：

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

注意： 您可以用一個(gè)動(dòng)畫(huà)keyframes-selectors。

css-styles

必需的。一個(gè)或多個(gè)合法的CSS樣式屬性

在線實(shí)例

實(shí)例

許多關(guān)鍵幀選擇器中添加一個(gè)動(dòng)畫(huà)：

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

運(yùn)行代碼 ?

實(shí)例

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

運(yùn)行代碼 ?

實(shí)例

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

運(yùn)行代碼 ?

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

@keyframes

實(shí)例

瀏覽器支持

標(biāo)簽定義及使用說(shuō)明

語(yǔ)法

在線實(shí)例

實(shí)例

實(shí)例

實(shí)例

相關(guān)文章