CSS3 @keyframes 動畫

CSS3的@keyframes，它可以取代許多網頁動畫圖像，Flash動畫，和JAVAScripts。

CSS3的動畫屬性

下麵的表格列出了 @keyframes 規則和所有動畫屬性：

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個瀏覽器版本號。

例子：

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

• 規定動畫的名稱
• 規定動畫的時長

如：

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

 註意: 您必須定義動畫的名稱和動畫的持續時間。如果省略的持續時間，動畫將無法運行，因為預設值是0。

實例：註意: 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-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;}
}