CSS3中的动画--过渡所需时间 transition-duration
03/18
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;}演示结果：
鼠标移入
鼠标移出
来自慕课网
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/145.html（转载时请注明本文出处及文章链接）
