本篇文章給大家帶來的內容是關于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中文網其它相關文章！