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

案例演示：

在鼠標(biāo)懸停（hover）狀態(tài)下，讓容器從直角慢慢過(guò)渡到圓角，并讓整個(gè)動(dòng)畫(huà)持續(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)移出