CSS3 animation

animation

• 瀏覽器支持

Internet Explorer 十、Firefox 以及 Opera 支持 animation 屬性。

Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

註釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

 

• 定義和用法

• animation-name       指定要綁定到選擇器的關鍵幀的名稱 ，爲 @Keyframes建立的動畫名

• animation-duration   用來指定元素播放動畫所持續的時間長　

• animation-timing-function :  設置動畫將如何完成一個週期，和transition中的transition-timing-function同樣，具備如下六種變換方式

ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效

• animation-delay   :  設置動畫在啓動前的延遲間隔。默認0

• animation-iteration-count   :  是用來指定元素播放動畫的循環次數

能夠取值<number>爲數字，其默認值爲 1

infinite爲無限次數循環

• animation-direction : normal | alternate 

默認值爲normal，若是設置爲normal時，動畫的每次循環都是向前播放；

alternate，他的做用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

• animation-fill-mode : none | forwards | backwards | both

說明：屬性規定動畫在播放以前或以後，其動畫效果是否可見

註釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞

javaScript語法：object.style.animationFillMode=none

參數：

none 不改變默認行爲。

forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。

both 向前和向後填充模式都被應用。

• animation-play-state :running | paused

running爲默認值 ,經過running將暫停的動畫從新播放

經過paused將正在播放的動畫停下了

　　

• 簡寫

animation: name duration timing-function delay iteration-count direction;
animation: name 2000; ( 省略 timing-function ,delay ,iteration-count ,direction)

 

@keyframes 規則

　　要建立CSS3動畫，你將不得不瞭解@keyframes規則。

　　@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改成新的樣式。

　　

實例：

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

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

 

@keyframes myfirst2
{
　　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 myfirst2 /* 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;}
}

 

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

div {

　　animation: myfirst 5s;

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

}

div > div { 

　　animation: myfirst2 5s;

　　-webkit-animation: myfirst2 5s; /* Safari 與 Chrome */ 

}