transition-duration屬性主要用來設(shè)置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續(xù)時間。

案例演示：

在鼠標(biāo)懸停（hover）狀態(tài)下，讓容器從直角慢慢過渡到圓角，并讓整個動畫持續(xù)0.5s。

HTML:

<div></div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 20px;
}

演示結(jié)果：

鼠標(biāo)移入

鼠標(biāo)移出