transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

案例演示：

在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续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;

}

演示结果：

鼠标移入

鼠标移出