css3實踐之圖片輪播（Transform，Transition和Animation）

　　樓主喜歡追求視覺上的享受，雖常以犧牲性能沒法兼容爲代價卻也樂此不疲。本文就經過一個個的demo演示來簡單瞭解下css3下的Transform，Transition和Animation。

　　本文須要實現效果：（請用chrome打開）

1. 圖片輪播
2. 圖片自動輪播

Transform

　　根據個人理解，transform和width、height、background同樣，都是dom的屬性，不一樣的是它是css3旗下的，比較屌，可以對原來的dom元素進行移動、縮放、轉動、拉長或拉伸，跟canvas上的某些api神似，這麼說來transform好像能幹些js才能乾的事。

　　transform分2D變換和3D變換，w3school中有很好的介紹和例子，具體請猛戳：CSS3 2D 轉換  CSS3 3D 轉換

　　爲了方便查找，我把w3school上的截圖在這裏保存一份：

Transition

　　transition的解釋是過渡，個人理解是css之間的變換，可是這個變換很屌很平滑，相似動畫。舉個栗子，一開始某個dom的類是classA，經過某種操做（好比被點擊了）後變成了classB，若是沒有transition，類之間的變換是很快的，機械般瞬間完成，可是有了transition，這便會是一個很緩和平滑的過程。

　　咱們經過demo來說解transition的使用方式。

　　寫好以下的html文件：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>  
<img src='http://hanzichi.github.io/img/img0.png' />

　　打開來是很是簡單的一張圖，加上css：

img {
  -webkit-transition: all 1s ease-in-out 0s;
}

img:hover {
  -webkit-transform: 
    rotate(360deg)
    scale(0.5, 0.5);

  opacity: 0;
}

　　效果請猛戳：transition變換 （ps：全部demo都沒有作兼容 請用chrome打開）

　　是否很簡單？demo中，你只需設定好圖片（img標籤）原先的屬性和hover後的屬性，中間的變換過程全由transition搞定！而transition加在某個元素下（demo的transition加在img標籤下），彷彿設置了一個監聽器，一旦該元素的屬性值即將要發生變化，就會自動檢查transition中的設定的屬性，一旦發現相匹配，則進行平滑的過渡。

　　transition有4個屬性，語法：transition: property duration timing-function delay  從前到後4個屬性依次可理解成「過渡動畫變換的屬性」、「過渡花費時間」、「過渡過程的速度變化」和「過渡開始前的等待時間」（默認值：all 0 ease 0 前兩個是必須的 後兩個可省略）。

　　若是不是全部屬性都要進行平滑過渡，或者各屬性過渡的時間、速度等設置各有需求，能夠把要過渡的屬性用逗號隔開，demo可寫成：

img {
  -webkit-transition: 
    -webkit-transform 1s ease-in-out 0s,
    opacity 1s ease-in-out 1s;
}

img:hover {
  -webkit-transform: 
    rotate(360deg)
    scale(0.5, 0.5);

  opacity: 0;
}

　　若是非得把transition的四個屬性分開來寫，能夠這樣：

img {
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0s;
}

　　我把後三個屬性放在一塊兒只寫了一個值（由於值同樣），你也能夠像property同樣分開來寫用逗號隔開。

　　這裏再介紹下timing-function的取值。六大取值：（仍是盜圖w3cschool）

• transition中的hover

　　相信你們實踐了transition後，對於transition究竟是直接寫在選擇器上，仍是寫在選擇器的hover上會表示疑惑，彷佛效果同樣。其實否則，若是對於通常的hover，也就是鼠標hover先後的過程是爲逆過程的話，兩種寫法效果一致，可是若是hover先後效果不同的話，transition須要分別加在選擇器的hover先後，好比這個demo：猛戳看demo

　　也就是說若是hover先後須要不同的效果，就能夠分別寫兩個transition。好比鼠標hover時顏色漸入2s，hover後漸出5s->猛戳demo

 　　

　　小結：通常transition應用在dom的class變換中，可先行寫好機械的變換，而後添加過渡效果。

Animation

　　Animation的解釋是動畫，增強版的transition。

　　若是說transition能實現某些js效果，animation就更像是js了。相似於寫一個canvas特效，特效總共好比說多少時間，咱們能規定在何時該出現什麼樣的場景，而各個場景間的轉換則徹底由css3自己負責，而keyframes比如定義了一個js方法。

 　　主要應用在某個元素須要進行連續的n次css變換。一個簡單的demo以下：animation動畫

　　咱們在@keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。

　　經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

1. 規定動畫的名稱
2. 規定動畫的時長

demo代碼：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  img {
    /*-webkit-animation: myfirst 5s;*/
  }
  
  @-webkit-keyframes myfirst
  {
    0% {
      -webkit-transform: 
        rotate(0deg)
        scale(1, 1);
      opacity: 1;
    }
    
    50% {
      -webkit-transform: 
        rotate(360deg)
        scale(0.5, 0.5);
      opacity: 0.5;
    }
    
    100% {
      -webkit-transform: 
        rotate(0deg)
        scale(1, 1)
        translate(300px, 200px);
      opacity: 1;
    }
  }

  img {
    -webkit-animation: myfirst 5s linear 0s 1 alternate;
    /*停在結束位置*/
    -webkit-animation-fill-mode: forwards;
  }
</style>  
<img src='http://hanzichi.github.io/img/img0.png' />

View Code

更多請猛戳 CSS3 動畫

具體應用：圖片輪播

　　相似應用可先寫好無過渡的代碼，而後再在class轉換之間添加transition。

　　該demo（圖片自動輪播）和transition有關的核心代碼就幾行，而js只是簡單的對元素的class進行賦值，動畫過程全由css3完成！

img {
  position: absolute;
  -webkit-transition: all 2s ease-out;
}

.disappear {
  opacity: 0;
}

.show {
  opacity: 1;
}

　　當img的class從show轉換成disappear或者從disappear轉換成show時（img標籤下的class變換），就會執行transition設置的過渡動畫。

　　另外一個demo的實現也大同小異，有興趣的能夠參考源碼：源碼請猛戳

總結

　　總的來講，transform只是爲dom增添一些屬性，而若是搭配transition或者animation則能完成一些動畫效果，我以爲實際應用較多的應該仍是transition，可配合僞類或者click等事件。

　　樓主對以上的理解不深，若有出入，還請指出。

　　如需瞭解更多，能夠參考這篇 CSS3 Transitions, Transforms和Animation使用簡介與應用展現