在CSS3中,我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現過渡效果。
其中,我們可以使用transition-property屬性來單獨設定過渡動畫所要操作的那個屬性。
語法:
transition-property:取值;
說明:
transition-property屬性的取值是一個“CSS屬性名”。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 transition-property屬性</title> <style type="text/css"> div { display:inline-block; width:100px; height:50px; background-color:#14C7F3; transition-property:height; transition-duration:0.5s ; transition-timing-function:linear; transition-delay:0; } div:hover { height:100px; } </style> </head> <body> <div></div> </body> </html>
在浏覽器預覽效果如下:
分析:
這裡使用transition-property屬性指定了過渡動畫所操作的CSS屬性是height。當鼠標移動到div元素上時,元素的高度會在0.5s內從50px過渡到100px。
對於CSS3過渡動畫,大多數情況下都是配合:hover偽類 來使用。
此處為了更清晰地表達,省略了兼容代碼的書寫,請大家在實際開發中別忘了寫兼容性代碼。這一章建議使用chrome浏覽器(-webkit-前綴)來學習。