在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-前綴）來學習。