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

CSS3中设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

属性值

效果

none

默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

例如：让动画停在最一帧处。代码如下：

 animation-fill-mode:forwards;

任务

在CSS编辑器的第28行输入正确的代码，元素背景色从红色变成蓝色。

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></div>
  11. </body>
  12. </html>
  1. @keyframes redToBlue{
  2.   from{
  3.     background: red;
  4.   }
  5.   20%{
  6.       background:green;
  7.   }
  8.   40%{
  9.       background:lime;
  10.   }
  11.   60%{
  12.       background:yellow;
  13.   }
  14.   to{
  15.     background:blue;
  16.   }
  17. }
  18.  
  19. div {
  20.   width: 200px;
  21.   height: 200px;
  22.   background: red;
  23.   margin: 20px auto;
  24.   animation-name:redToBlue;
  25.   animation-duration: 20s;
  26.   animation-timing-function: ease;
  27.   animation-delay: 1s;
  28.   ?: both; 
  29. }
下一节