目录
任务描述
相关知识
动画执行次数
动画反向播放
编程要求
任务描述
本关任务：用 CSS3 实现loading效果。效果图如下：
相关知识
为了完成本关任务，你需要掌握：1.动画执行次数，2.动画反向播放。
需要实现的效果如下：
动画执行次数
动画从开始到结束（0%到100%）称为一个动画的周期，也就是说，动画执行了一次。
基本的结构如下（这里省略了部分样式）：
<div class="box"><span>0%</span><span>100%</span>
</div>
.box{ width: 0px;}效果图如下：
先创建一个动画名称为progress的动画。代码如下：
@keyframes progress{0% { width: 0px; }100%{ width: 300px; }
}然后把这个动画绑定到class="box"元素上就可以了。代码如下：
.box{animation: progress 2s ease;
}效果图如下：
可以看出，这里动画只执行了一次。如何让它执行多次呢？这里用到animation-iteration-count属性，它的值有：
n， 表示动画播放次数的数值；infinite，表示动画无限次播放；
这里先执行3次，代码如下：
.box{animation: progress 2s ease 3;
}效果如下：
动画反向播放
上面进度条从100%到0%时是直接消失的，怎么让它逐渐消失呢？
第一种思路：把从0%到100%，100%到0%看作动画的一个周期。这时总完成时间就会翻倍。
实现代码如下：
@keyframes progress{0% { width: 0px;}50%{ width: 300px;}100%{ width: 0px;}
}
.box{animation: progress 4s ease;
}效果如下：
因为这里的动画比较简单，这样写没什么问题。但动画效果比较复杂时，需要计算的东西就比较多了，也比较麻烦。
第二种思路：利用属性animation-direction，它规定了动画是否在下一周期逆向播放。它的值有：
normal，默认值，表示正常播放；reverse，表示动画反向播放；alternate，动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放；
可以利用animation-direction: alternate; 让动画第二次反向播放。
实现代码如下：
.box{animation: progress 2s ease 3 alternate;
}效果如下：
注意：alternate这个值在 动画次数≥2 的时候才有效果；
编程要求
根据提示，在右侧编辑器补充代码，实现loading效果。要求如下：
- 动画名称为
loading； - 动画一次完成的时间：外面的为
1s，里面的为1.5s； - 动画的速度曲线为
linear; - 动画完成的次数为 无限次；
- 外面的顺时针旋转，里面的逆时针旋转；
提示：
animation-direction: reverse;可以实现动画反向播放；- 注意动画简写的顺序；
为了方便评测， CSS 都是需要以分号;结尾的。
效果如下：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}@keyframes loading{0%{ transform: rotate(0deg); }100%{ transform: rotate(360deg); }}.box{position: relative;width: 100%;height: auto;background: black;}.big{width: 40px;height: 40px;border: 5px solid red;border-radius: 50%;border-color: red red transparent transparent;position: absolute;left: 100px;top: 100px;/************ Begin **************/animation:loading 1s linear infinite;/************* End ***************/}.small{width: 20px;height: 20px;border: 5px solid red;border-radius: 50%;border-color: transparent transparent red red;position: absolute;left: 110px;top: 110px;/************ Begin **************/animation:loading 1.5s linear infinite reverse;/************* End ***************/}</style>
</head>
<body><div class="box"><div class="big"></div><div class="small"></div></div>
</body>
</html>
