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

CSS3中设置动画播放方向

animation-direction属性主要用来设置动画播放方向,其语法规则如下:

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值:normalalternate

1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;

2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为:

animation-direction:alternate;

注意:Chrome或Safari浏览器,需要加入-webkit-前缀!

 

任务

在CSS编辑器第45行输入正确代码,将动画move播放方向设置为alternate。

注意:Chrome或Safari浏览器,需要加入-webkit-前缀!

  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. ?:alternate;
  46. }
下一节