在CSS3中，我们可以使用transition-property属性来定义过渡效果操作的是哪一个属性。

语法：

transition-property: 取值;

说明：

transition-property属性取值是“CSS属性”。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:50px;
            background-color:lightskyblue;
            transition-property:height;
            transition-duration:0.5s ;
            transition-timing-function:linear;
            transition-delay:0s;
        }
        div:hover
        {
            height:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素上时，元素会慢慢过渡到图所示的效果。

分析：

在这个例子中，我们使用transition-property属性指定了过渡效果所操作的属性是height。当鼠标移到元素上时，元素的height会在0.5秒内从50px平滑过渡到100px。当然，小伙伴们可以自行测试一下其他属性，看看效果如何。

transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0s;

上面这种过渡效果的完整形式，不过在实际开发中，我们大多数都是采用下面这种简写形式：

transition: height 0.5s linear 0s;