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

CSS3中设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

语法规则：

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

案例演示：    

浏览器渲染样式之后2S之后触发move动画。

HTML:

<div><span></span></div>

CSS:

@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div {
  width: 500px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
  animation-name:move;
  animation-duration: 10s;
  animation-timing-function:ease;
  animation-delay:2s;
  animation-iteration-count:infinite;
}

结果展示：

任务

在右侧CSS编辑器的第40行输入正确的代码，让浏览器加载之后3s触发move动画。

注意：如果您的练习无结果，请到火狐浏览器下进行结果测试！

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><span></span></div>
  10.  
  11. </body>
  12. </html>
  1. @keyframes move {
  2.   0%{
  3.     transform: translate(0);
  4.   }
  5.   15%{
  6.     transform: translate(100px,180px);
  7.   }
  8.   30%{
  9.     transform: translate(150px,0);
  10.   }
  11.   45%{
  12.     transform: translate(250px,180px);
  13.   }
  14.   60%{
  15.     transform:translate(300px,0);
  16.   }
  17.   75%{
  18.     transform: translate(450px,180px);
  19.   }
  20.   100%{
  21.     transfrom: translate(480px,0);
  22.   }
  23. }
  24.  
  25. div {
  26.   width: 500px;
  27.   height: 200px;
  28.   border: 1px solid red;
  29.   margin: 20px auto;
  30. }
  31. div span {
  32.   display: inline-block;
  33.   width: 20px;
  34.   height: 20px;
  35.   background: green;
  36.   border-radius: 100%;
  37.   animation-name:move;
  38.   animation-duration: 10s;
  39.   animation-timing-function:ease;
  40.   ?:3s;
  41.   animation-iteration-count:infinite;
  42. }
下一节