Design Code 設計密碼

通過CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及JavaScript。

CSS3 動畫

CSS3 @keyframes 規則

如需在CSS3 中創建動畫，您需要學習@keyframes 規則。

@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 <span class="code_comment">/* Firefox */</span>
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst <span class="code_comment">/* Safari和Chrome */</span>
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst <span class="code_comment">/* Opera */</span>
{
from {background: red;}
to {background: yellow;}
}
	

CSS3 動畫

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

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

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

實例

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

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;     <span class="code_comment">/* Firefox */</span> 
-webkit-animation: myfirst 5s;     <span class="code_comment">/* Safari和Chrome */</span> 
-o-animation: myfirst 5s;     <span class="code_comment">/* Opera */</span>
}
	

註釋：您必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因為默認值是0。

什麼是CSS3 中的動畫？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間，或用關鍵詞"from" 和"to"，等同於0% 和100%。

0% 是動畫的開始，100% 是動畫的完成。

為了得到最佳的瀏覽器支持，您應該始終定義0% 和100% 選擇器。

實例

當動畫為25% 及50% 時改變背景色，然後當動畫100% 完成時再次改變：

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst <span class="code_comment">/* Firefox */</span>
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst <span class="code_comment">/* Safari和Chrome */</span>
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst <span class="code_comment">/* Opera */</span>
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
	

實例

改變背景色和位置：

@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;}
}
@-moz-keyframes myfirst <span class="code_comment">/* Firefox */</span>
{
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 <span class="code_comment">/* Safari和Chrome */</span>
{
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;}
}
@-o-keyframes myfirst <span class="code_comment">/* Opera */</span>
{
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;}
}
	

CSS3 動畫屬性

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

下面的兩個例子設置了所有動畫屬性：

實例

運行名為myfirst 的動畫，其中設置了所有動畫屬性：

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
<span class="code_comment">/* Firefox: */</span>
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
<span class="code_comment">/* Safari 和Chrome: */</span>
-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;
<span class="code_comment">/* Opera: */</span>
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
	

實例

與上面的動畫相同，但是使用了簡寫的動畫animation 屬性：

div
{
animation: myfirst 5s linear 2s infinite alternate;
<span class="code_comment">/* Firefox: */</span>
-moz-animation: myfirst 5s linear 2s infinite alternate;
<span class="code_comment">/* Safari 和Chrome: */</span>
-webkit-animation: myfirst 5s linear 2s infinite alternate;
<span class="code_comment">/* Opera: */</span>
-o-animation: myfirst 5s linear 2s infinite alternate;
}