CSS3 過渡transition 認識

其實，我一直覺得自己對新知識是以一種抵觸的情緒在學習的。因為我總是習慣於將事情想得很復雜，所以也錯過了很多美好的東西。

以前覺得CSS3的知識應該是很難的，很難理解的。但是我發現我覺得知識點很難，是因為我的學習方式有不對，我習慣於聽老師講課，而不是自己去看那密密麻麻的文字(其實我一直覺得自己有閱讀困難症)。

今天寫的是CSS3中的transition屬性:

 一、transition屬性有四個獨立屬性，分別是：transition-property、transition-duration、transition-timing-function和transition-delay。

1.transition-property：檢索或設置對象中的參與過渡的屬性，取值有none、all和指定進行過渡的css屬性(如：height、background-color或者color等等)。

2.transition-duration: 檢索或設置對象過渡的持續時間（過渡動畫持續的時間），值為時間(如：0.1s、2等等)。

3.transition-timing-function: 檢索或設置對象中過渡的動畫類型，值有linear、ease、ease-in、ease-out、ease-in-out。

    3-1. linear：勻速；ease：緩慢開始，緩慢結束，中間的時候會快一點；ease-in：緩慢開始，然后再慢慢變快，結束的時候看起來像是勻速的；ease-out：剛開始的時候比較快，緩慢結束；ease-in-out：緩慢開始，緩慢結束，和ease有點小區別。

    //我承認我的眼睛看不出來這其中每個類型之間的差別，只有linear和ease-in對我而言是動畫效果很明顯的。

    在線查看過渡的動畫類型的效果

4.transition-delay：檢測或設置對象延遲過渡的時間（就是說在多久之后才執行過渡動畫），值為時間(如：0.1s、1s等等)。

如果只設置一個時間，則該值為過渡的持續時間。

 

二、transition屬性的書寫：

1.縮寫方式：直接在CSS樣式中的大括號里面寫，如：

    #div {
        ...
        transition: height 2s linear 0.5s;
    }

2.拆分方式：也是寫在CSS樣式中，如：

    #div {
	...
	transition-property: height;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 0.5s;
    }

  當然，也可以為同一個元素的多個屬性定義過渡效果。

 

三、transition屬性的兼容性：

 

以上內容可能存在內容不足、內容錯誤的問題，希望各位讀者朋友批評指正。