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

CSS3中设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

例如，页面加载时，动画不播放。代码如下：

animation-play-state:paused;

 

任务

在CSS编辑器的第49行输入正确代码，让停止的动画在hover的时候播放，不是hover状态停止。

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.  
  10. <div><span></span></div>
  11. </body>
  12. </html>
  1. @keyframes move {
  2.   0%{
  3.     transform: translateY(90px);
  4.   }
  5.   15%{
  6.     transform: translate(90px,90px);
  7.   }
  8.   30%{
  9.     transform: translate(180px,90px);
  10.   }
  11.   45%{
  12.     transform: translate(90px,90px);
  13.   }
  14.   60%{
  15.     transform: translate(90px,0);
  16.   }
  17.   75%{
  18.     transform: translate(90px,90px);
  19.   }
  20.   90%{
  21.     transform: translate(90px,180px);
  22.   }
  23.   100%{
  24.     transform: translate(90px,90px);
  25.   }
  26. }
  27.  
  28. div {
  29.   width: 200px;
  30.   height: 200px;
  31.   border: 1px solid red;
  32.   margin: 20px auto;
  33. }
  34. span {
  35.   display: inline-block;
  36.   width: 20px;
  37.   height: 20px;
  38.   background: orange;
  39.   transform: translateY(90px);
  40.   animation-name: move;
  41.   animation-duration: 10s;
  42.   animation-timing-function: ease-in;
  43.   animation-delay: .2s;
  44.   animation-iteration-count:infinite;
  45.   animation-direction:alternate;
  46.   animation-play-state:paused;
  47. }
  48. div:hover span {
  49.   ?:running;
  50. }
下一节