css3中新增的transition屬性的的介紹（附樣本）

本篇文章給大家帶來的內容是關於css3中新增的transition屬性的的介紹（附樣本） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

在CSS3中新增加了一個新的模組transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。
它是一個複合屬性，主要包括以下幾個子屬性。

transition-property:指定過渡或動態類比的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間

如：

transition: background-color .5s ease .1s;

特別注意：當“transition-property”屬性設定為all時，表示的是所有中點值的屬性。

樣本：

width: 200px;  height: 200px;  background: red;  margin: 20px auto;  -webkit-transition-property: width;  transition-property: width;  -webkit-transition-duration:.5s;  transition-duration:.5s;  -webkit-transition-timing-function: ease-in;  transition-timing-function: ease-in;  -webkit-transition-delay: .18s;  transition-delay:.18s;

也可以對屬性進行單個設定。