CSS3中新增的transform屬性,可以實現元素在變換過程中的過渡效果,實現了基本的動畫。下面通過本文給大家介紹CSS3使用transition屬性實現過渡效果,需要的朋友參考下本文
屬性詳解
transition屬性目的是讓css的一些屬性(如background)的以平滑過渡的效果出現。它是一個合并屬性,是由以下四個屬性群組合而成:
transition-property:設定應用過渡的CSS屬性,如background。
transition-duration:設定過渡效果花費的時間。預設是 0。
transition-timing-function:設定過渡效果的時間曲線。預設是 "ease"。
transition-delay:規定過渡效果何時開始。預設是 0。
樣本:
button{ transition: background 1s; -webkit-transition: background 1s; /* Safari */ }
定義transition屬性時,transition-property和transition-duration是必選,其他兩個為可選。
transition-property和transition-duration
transition-property用來指定應用過渡效果的CSS屬性,這些屬性包括(可能不全):
width
height
color
background (color, image, position)
transform (in the next post)
border (color, width)
position (top, bottom, left, right )
text (size, weight, shadow, word-spacing)
margin
padding
opacity
visibility
z-index
all
transition-duration屬性用來設定指定屬性的過渡效果花費時間,可以是秒(s)或者毫秒(ms)。
transition-delay和transition-timing-function
transition-delay用來設定過渡效果開始的時間,預設為0,可以是秒(s)或者毫秒(ms)。如果transition-delay是負數,表示過渡效果提前開始。
transition-timing-function用來設定過渡的效果,這些效果包括:
樣本:
button{ transition: background 1s ease-in-out 2s; -webkit-transition: background 1s ease-in-out 2s; /* Safari */ }
多屬性
對於多個屬性,各個屬性的效果以逗號隔開:
button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }
相容性
Internet Explorer 10、Firefox、Opera 和 Chrome 支援 transition 屬性。
Safari 支援替代的 -webkit-transition 屬性。
Internet Explorer 9 以及更早版本的瀏覽器不支援 transition 屬性。
觸發
需要注意的是,過渡效果是需要之前已經定義好了屬性,過渡效果通過觸發來應用,比如:hover, :focus, and :active等。
以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!