css3動畫2 transition 詳解（共含有transform transition animate）

 

                         CSS3 Transition詳解

   幾個讓人頭大的單詞，可能會混淆，尤其是你過一段不用的話肯定會搞不清各自的意思

transform

translate

transition   今天主要說transition 中文意思過渡，順便在說一下transform 和translate,transform 是變形的意思，平移，縮放，旋轉，扭曲都是變形的一種，translate 是平移的意思，translate 是屬於transform 的一種，transform 跟 transition 是平級的概念。 

       transition 是過渡的意思，你會如果理解這個詞，或者說提到這個這個詞你會有什麼反應，說實話，當我第一次接觸到這個詞屬性的時候我有點蒙，單純從字面上還是不太好理解，當我寫了幾個例子以後對這個東西有了直觀的感受，過渡其實就是一段動畫，例如有一段動畫是一個矩形從座標（0,0） 移動到了（100,100），你看到了這個移動的過程，那麼這就是一種過渡，這時候有人會說過渡其實就是讓你看到了transform的過程，例如你使用translate（100,100） 我們就可以通過transition 看到 translate 的過程，這個是可以的，transition 是可以對transform 的所有屬性進行過渡，但是不是僅限於transform transform 更多是對形狀上的變換，而transition 還可以對另外一大類顏色變換進行過渡，例如，一個div 是background 是紅色，你後來修改爲紫色，你就可以使用css3的transition 屬性看到div 從紅變紫色的過程，是不是很奇妙。

下邊兩個例子看看過渡的效果

這是測試圖形

 

 

 

transition 有幾個重要的熟悉，transition-property ，transition-duration ,transition-time-function,transition-delay 四個參數

 

transition-property

這個參數是稍微最理解的一個，爲什麼要設置這個參數讓你會感到困惑，這時候就要問自己幾個問題

1：爲什麼需要過渡

2：過渡的結果是什麼

第一個好回到，當然過渡就是爲了效果更漂亮，

   

 待續。。。。。。。。。。。。。。，iteye 的編輯器沒辦法插入script 控制代碼，有些例子沒法寫進去