CSS3的新屬性的一下總結

阮一峰：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

由於自己經常搞混：animation，transition，transform這三個屬性，今天就總結一下
首先是：
transform:和css3一些基本屬性，例如：box-shadow、border-radius、background-position等等的這些屬性是一個型別的，他可以做2D、3D，旋轉、放大、縮小等的一些變化
動畫類：

　　animation & transition
　　
　　而這兩個是做動畫類的屬性；

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)等等。

transition的侷限

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

（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。

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

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

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

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

transition

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

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
div:hover{
  transition: 1s rainbow 
}