CSS動畫簡介 - JavaShuo

如今，我不多寫介紹CSS的文章，由於感受網站開發的關鍵仍是在服務器端。git

可是，CSS動畫除外，它實在太有用了。github

本文介紹CSS動畫的兩大組成部分：transition和animation。我不打算給出每一條屬性的詳盡介紹，那樣能夠寫一本書。這篇文章只是一個簡介，幫助初學者瞭解全貌，同時又是一個快速指南，當你想不起某一個用法的時候，可以快速地找到提示。web

個人主要參考資料是，2013年10月，Lea Verou在JSConf.Asia上面的演講《CSS in the 4th Dimension》。那是一個很是棒的演講，有視頻和幻燈片，強烈推薦。chrome

第一部分：CSS Transition

1.1 基本用法

在CSS 3引入Transition（過渡）這個概念以前，CSS是沒有時間軸的。也就是說，全部的狀態變化，都是即時完成。瀏覽器

上面是一個演示，當鼠標放置於縮略圖之上，縮略圖會迅速變大。注意，縮略圖的變大是瞬間實現的。下面是代碼，至關簡單。安全

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

transition的做用在於，指定狀態變化所須要的時間。服務器

img{
    transition: 1s;
}

上面代碼指定，圖片放大的過程須要1秒，效果以下。函數

咱們還能夠指定transition適用的屬性，好比只適用於height。

img{
    transition: 1s height;
}

這樣一來，只有height的變化須要1秒實現，其餘變化（主要是width）依然瞬間實現，效果以下。

1.2 transition-delay

在同一行transition語句中，能夠分別指定多個屬性。

img{
    transition: 1s height, 1s width;
}

可是，這樣一來，height和width的變化是同時進行的，跟不指定它們沒有差異，效果以下。

咱們但願，讓height先發生變化，等結束之後，再讓width發生變化。實現這一點很容易，就是爲width指定一個delay參數。

img{
    transition: 1s height, 1s 1s width;
}

上面代碼指定，width在1秒以後，再開始變化，也就是延遲（delay）1秒，效果以下。

delay的真正意義在於，它指定了動畫發生的順序，使得多個不一樣的transition能夠連在一塊兒，造成複雜效果。

1.3 transition-timing-function

transition的狀態變化速度（又稱timing function），默認不是勻速的，而是逐漸放慢，這叫作ease。

img{
    transition: 1s ease;
}

除了ease之外，其餘模式還包括

（1）linear：勻速

（2）ease-in：加速

（3）ease-out：減速

（4）cubic-bezier函數：自定義速度模式

最後那個cubic-bezier，可使用工具網站來定製。

img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

上面的代碼會產生一個最後階段放大過分、而後回縮的效果。

1.4 transition的各項屬性

transition的完整寫法以下。

img{
    transition: 1s 1s height ease;
}

這實際上是一個簡寫形式，能夠單獨定義成各個屬性。

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

1.5 transition的使用注意

（1）目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，因此transition已經能夠很安全地不加瀏覽器前綴。

（2）不是全部的CSS屬性都支持transition，完整的列表查看這裏，以及具體的效果。

（3）transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0px變化到100px，transition能夠算出中間狀態。可是，transition無法算出0px到auto的中間狀態，也就是說，若是開始或結束的設置是height: auto，那麼就不會產生動畫效果。相似的狀況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

1.6 transition的侷限

transition的優勢在於簡單易用，可是它有幾個很大的侷限。

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation就是爲了解決這些問題而提出的。

第二部分：CSS Animation

2.1 基本用法

首先，CSS Animation須要指定動畫一個週期持續的時間，以及動畫效果的名稱。

div:hover {
  animation: 1s rainbow;
}

上面代碼表示，當鼠標懸停在div元素上時，會產生名爲rainbow的動畫效果，持續時間爲1秒。爲此，咱們還須要用keyframes關鍵字，定義rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代碼表示，rainbow效果一共有三個狀態，分別爲起始（0%）、中點（50%）和結束（100%）。若是有須要，徹底能夠插入更多狀態。效果以下。

默認狀況下，動畫只播放一次。加入infinite關鍵字，可讓動畫無限次播放。

div:hover {
  animation: 1s rainbow infinite;
}

也能夠指定動畫具體播放的次數，好比3次。

div:hover {
  animation: 1s rainbow 3;
}

這裏還有一個心臟跳動的例子，可供參考。

2.2 animation-fill-mode

動畫結束之後，會當即從結束狀態跳回到起始狀態。若是想讓動畫保持在結束狀態，須要使用animation-fill-mode屬性。

div:hover {
  animation: 1s rainbow forwards;
}

forwards表示讓動畫停留在結束狀態，效果以下。

animation-fill-mode還可使用下列值。

（1）none：默認值，回到動畫沒開始時的狀態。

（2）backwards：讓動畫回到第一幀的狀態。

（3）both: 根據animation-direction（見後）輪流應用forwards和backwards規則。

2.3 animation-direction

動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性，能夠改變這種行爲。

下面看一個例子，來講明如何使用animation-direction。假定有一個動畫是這樣定義的。

@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

默認狀況是，animation-direction等於normal。

div:hover {
  animation: 1s rainbow 3 normal;
}

此外，還能夠等於取alternate、reverse、alternate-reverse等值。它們的含義見下圖（假定動畫連續播放三次）。

簡單說，animation-direction指定了動畫播放的方向，最經常使用的值是normal和reverse。瀏覽器對其餘值的支持狀況不佳，應該慎用。

2.4 animation的各項屬性

同transition同樣，animation也是一個簡寫形式。

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

這是一個簡寫形式，能夠分解成各個單獨的屬性。

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

2.5 keyframes的寫法

keyframes關鍵字用來定義動畫的各個狀態，它的寫法至關自由。

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

0%能夠用from表明，100%能夠用to表明，所以上面的代碼等同於下面的形式。

@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

若是省略某個狀態，瀏覽器會自動推算中間狀態，因此下面都是合法的寫法。

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至，能夠把多個狀態寫在一行。

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

另一點須要注意的是，瀏覽器從一個狀態向另外一個狀態過渡，是平滑過渡。steps函數能夠實現分步過渡。

div:hover {
  animation: 1s rainbow infinite steps(10);
}

這裏有一個很是神奇的例子，能夠看到steps函數的用處。

2.6 animation-play-state

有時，動畫播放過程當中，會忽然中止。這時，默認行爲是跳回到動畫的開始狀態。

上面動畫中，若是鼠標移走，色塊馬上回到動畫開始狀態。

若是想讓動畫保持忽然終止時的狀態，就要使用animation-play-state屬性。

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

上面的代碼指定，沒有鼠標沒有懸停時，動畫狀態是暫停；一旦懸停，動畫狀態改成繼續播放。效果以下。

2.7 瀏覽器前綴

目前，IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，因此必須使用webkit前綴。

也就是說，實際運用中，代碼必須寫成下面的樣子。

div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

（完）

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html