在之前的課程中，實現CSS3過渡效果，我們都是僅僅針對一個CSS屬性來操作。其實在CSS3中，我們可以使用transition屬性同時對多個CSS屬性進行實現平滑過渡效果。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>深入了解transition屬性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius,background-color;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover
{
border-radius:50px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當鼠標移動到div元素上方時，div元素會在1s時間內同時對border-radius和background-color這兩個屬性產生過渡效果。
如果想要使用transition屬性同時對多個屬性進行實現平滑過渡效果，只需要在transition-property屬性添加多個屬性名即可，其中屬性名之間用英文逗號隔開。