8-8 CSS3中的动画--过渡所需时间 transition-duration
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3中的动画--过渡所需时间 transition-duration

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;
}

演示结果：

鼠标移入

鼠标移出

 

任务

在右侧CSS编辑器第8行输入正确的代码，让容器高度从200px慢慢过渡到100px，并且整个过渡持续1s。

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>变形与动画</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head> 
  8. <body>
  9. <div></div>
  10.  
  11. </body>
  12. </html>
  1. div {
  2.   width: 300px;
  3.   height: 200px;
  4.   background-color: orange;
  5.   margin: 20px auto;
  6.   -webkit-transition-property: height;
  7.   transition-property: height;
  8.   -webkit-？: 1s;
  9.   transition-duration: 1s;
  10.   -webkit-transition-timing-function: ease-out;
  11.   transition-timing-function: ease-out;
  12.   -webkit-transition-delay: .2s;
  13.   transition-delay: .2s;
  14. }
  15. div:hover {
  16.   height: 100px;
  17. }
下一节