css transition屬性是一個簡寫屬性,其語法是transition: property duration timing-function delay,用來設定四個過渡屬性。
css transition屬性怎麼用?
作用:
transition 屬性是一個簡寫屬性,用來設定四個過渡屬性:transition-property transition-duration transition-timing-function transition -delay
語法:
transition: property duration timing-function delay;
說明:
transition-property 規定設定過渡效果的CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
註解:請務必設定 transition-duration 屬性,否則長度為 0,就不會產生過渡效果。
css transition屬性使用範例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> </body> </html>
效果輸出:
# #
以上是css transition屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!