CSS3 @keyframes 規則

標籤：any   file   div   選擇   www   internet   應該   多次   alt   

CSS3 @keyframes 規則

執行個體

使一個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規則，你可以建立動畫。

建立動畫是通過逐步改變從一個CSS樣式設定到另一個。

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

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

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

為了獲得最佳的瀏覽器支援，您應該始終定義為0％和100％的選取器。

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

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

值	說明
animationname	必需的。定義animation的名稱。
keyframes-selector	必需的。動畫期間的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意： 您可以用一個動畫keyframes-selectors。
css-styles	必需的。一個或多個合法的CSS樣式屬性

線上執行個體
執行個體

許多主要畫面格選取器中添加一個動畫：

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

CSS3 @keyframes 規則