9-3 CSS3中设置动画播放时间
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3中设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

animation-duration: <time>[,<time>]*

取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

案例演示：

制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。

HTML:

<div>Hover Me</div>

CSS:

@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 100%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
}
div:hover {
  animation-name: toradius;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: .1s;
}

鼠标移入

鼠标移出

任务

在右侧CSS编辑器的第20行输入正确的代码，让元素从红色变化到绿色，整个变化过程持续5s时间。

提示：到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。

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>Hover Me</div>
  10.  
  11. </body>
  12. </html>
  1. @keyframes changeColor {
  2.   from {
  3.     background: red;
  4.   }
  5.   to {
  6.     background:green;
  7.   }
  8. }
  9. div {
  10.   width: 200px;
  11.   height: 200px;
  12.   background: red;
  13.   text-align:center;
  14.   margin: 20px auto;
  15.   line-height: 200px;
  16.   color: #fff;
  17. }
  18. div:hover {
  19.   animation-name: changeColor;
  20.   ？: 5s;
  21.   animation-timing-function: ease-out;
  22.   animation-delay: .1s;
  23. }
下一节