在CSS3中，我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現過渡效果。
在CSS3中，我們可以使用transition-duration屬性單獨設置過渡持續的時間。
語法：
transition-duration：時間;
說明：
transition-duration屬性取值是一個時間，單位為s（秒），可以為小數如0.5s。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3過渡</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當鼠標移動到div元素上面時，div元素圓角半徑在0.5秒內從0過渡到50px。過渡之後效果如下：
關於圓角屬性技巧，我們在“圓角border-radius屬性”這一節已經詳細給大家介紹過。
這裡使用transition-duration屬性定義了過渡持續的時間為1s。大家可以在在線測試中改變時間，然後看看變化的速率是怎樣的。