CSS3 動畫（CSS3 @keyframes 規則）

標籤：not   webkit   動畫   frame   綁定   div   style   時間長度   safari   

@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。

瀏覽器支援

 

Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。

 

Chrome 和 Safari 需要首碼 -webkit-。

 

注釋：Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。

 

 

 

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

CSS3 動畫

當您在 @keyframes 中建立動畫時，請把它捆綁到某個選取器，否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選取器：

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

執行個體

把 "myfirst" 動畫捆綁到 div 元素，時間長度：5 秒：

div{animation: myfirst 5s;-moz-animation: myfirst 5s;/* Firefox */-webkit-animation: myfirst 5s;/* Safari 和 Chrome */-o-animation: myfirst 5s;/* Opera */}

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

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3 動畫（CSS3 @keyframes 規則）