最新的Web開發教程
 

CSS動畫

❮上一頁 下一頁章❯

CSS3動畫

CSS3動畫允許大多數HTML元素的動畫，而無需使用JavaScript或Flash！

CSS3
動畫

對於動畫瀏覽器支持

在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。

其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。

屬性
@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-
animation 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-

什麼是CSS3動畫？

動畫讓元素從一個樣式逐漸改變到另一個。

你可以改變你想要的CSS屬性，你想多次。

要使用CSS3動畫，必須先指定為動畫關鍵幀一些。

關鍵幀保持元件將具有在特定的時間什麼樣式。

該@keyframes規則

當您指定內部CSS樣式@keyframes規則，動畫將逐步從目前的樣式更改在特定時間的新樣式。

為了得到一個動畫的工作，必須綁定動畫的元素。

下面的例子綁定了“榜樣”的動畫到<div>元素。 該動畫將持續4秒鐘，它會逐漸的背景顏色改變<div>元素從“紅”到“黃色”：

例

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
試一試»

注意：如果animation-duration不指定屬性，動畫將沒有任何效果，因為默認值是0。

在上面我們已指定時的樣式將通過使用關鍵字來更改示例"from"和"to" （表示為0％（開始）和100％（完全））。

另外，也可以使用百分之。 通過使用百分比，可以根據需要添加盡可能多的風格變化。

下面的例子將改變背景色<div>元素中的動畫完成25％，完成50％的時候，再次當動畫100％完成：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
試一試»

下面的例子將改變這兩個背景顏色和位置<div>元素中的動畫完成25％，完成50％的時候，再次當動畫100％完成：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
試一試»

耽誤動畫

該animation-delay屬性指定動畫的開始會有一個延遲。

下面的例子有啟動動畫前2秒延時：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
試一試»

設置多少次動畫應該運行

該animation-iteration-count屬性指定的時間的動畫應該運行的數量。

下面的例子將運行動畫3次之前停止：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
試一試»

下面的示例使用值“ infinite ”，使動畫繼續，直到永遠。

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
試一試»

在反方向或交替週期中運行動畫

該animation-direction屬性用來讓反方向或交替循環的動畫運行。

下面的例子將運行在相反的方向動畫：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
試一試»

下面的示例使用值"alternate" ，使動畫第一向前跑，然後向後，再向前：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
試一試»

指定動畫的速度曲線

該animation-timing-function屬性指定動畫的速度曲線。

動畫定時功能屬性可以有以下值：

  • ease -指定一個緩慢的開始一個動畫，那時快，然後結束慢（這是默認）
  • linear -指定與從開始以相同的速度來結束動畫
  • ease-in -指定一個緩慢的開始動畫
  • ease-out -指定一個緩慢的結尾動畫
  • ease-in-out -指定一個緩慢的開始和結束動畫
  • cubic-bezier(n,n,n,n) -讓您在立方貝塞爾函數定義自己的價值

下面的例子示出了一些可用於不同的速度曲線：

例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
試一試»

動畫速記屬性

下面的示例使用的動畫屬性的六：

例

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
試一試»

相同的動畫效果如上述可以通過使用速記來實現animation屬性：

例

div {
    animation: example 5s linear 2s infinite alternate;
}
試一試»

自測練習用！

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»

CSS3動畫屬性

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

屬性 描述
@keyframes 指定動畫代碼
animation 簡寫屬性設置所有動畫屬性
animation-delay 指定的動畫的開始的延遲
animation-direction 指定動畫是否應該反方向或交替循環播放
animation-duration 指定的動畫多少秒或毫秒需要完成一個週期
animation-fill-mode 指定元素樣式當動畫是不是在玩（當它結束時，或者當它有一個延遲）
animation-iteration-count 指定的動畫應該播放的次數
animation-name 指定@keyframes動畫的名稱
animation-play-state 指定動畫是否正在運行或暫停
animation-timing-function 指定動畫的速度曲線

❮上一頁 下一頁章❯