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;

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

相關推薦：

CSS3 transition屬性_html/css_WEB-ITnose

CSS3中Transition屬性詳解以及範例分享_CSS/HTML

以上是css3中新增的transition屬性的介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！