CSS3 動畫

SS3 動畫

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

CSS3 動畫

CSS3 @keyframes 規則

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

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

瀏覽器支持

屬性	瀏覽器支持
@keyframes
animation

Internet Explorer 十、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;}
}

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

親自試一試

註釋：您必須定義動畫的名稱和時長。若是忽略時長，則動畫不會容許，由於默認值是 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 /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 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 /* Firefox */
{
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 和 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;} } @-o-keyframes myfirst /* Opera */ { 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 規則和全部動畫屬性：

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規定動畫什麼時候開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	3
animation-fill-mode	規定對象動畫時間以外的狀態。	3

下面的兩個例子設置了全部動畫屬性：

實例

運行名爲 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;
/* Firefox: */
-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;
/* Safari 和 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; /* Opera: */ -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;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; } 

親自試一試