首先我们需要了解CSS3的animation属性
我们可以通过W3Cschool去了解这个属性。
animation语法
animation: name duration timing-function delay iteration-count direction;
/**
*name: 需要绑定的keyframe的名称（通俗来说就是动画名称）;
*duration: 完成一次动画需要的时间
*timing-function: 动画执行的速度曲线
*delay: 动画开始执行的延时
*iteration-count: 动画执行的次数
*direction: 动画是否轮流方向播放
*/
制作一个弹跳的加载等待动画
动画的布局
<div class="bounce-loading">
<div class="block block_1"></div>
<div class="block block_2"></div>
<div class="block block_3"></div>
<div class="block block_4"></div>
</div>
添加样式（我这里使用的是stylus这个css预处理器，不知道的朋友可以自行百度一下，或者戳这里。）
.bounce-loading
position: relative
margin: 0
padding: 0
width: 60px
height: 60px
.block
width: 5px
height: 5px
background: rgb(20, 220, 20)
&.block_1
position: absolute
left: 0
top: 5px
animation: bounce 1.5s linear 0.2s infinite normal
&.block_2
position: absolute
left: 10px
top: 5px
animation: bounce 1.5s linear 0.4s infinite normal
&.block_3
position: absolute
left: 20px
top: 5px
animation: bounce 1.5s linear 0.6s infinite normal
&.block_4
position: absolute
left: 30px
top: 5px
animation: bounce 1.5s linear 0.8s infinite normal
动画效果keyframe，这里的命名一定要和animation的参数命名相同。
@keyframes bounce {
0% {
transform: translateY(0)
}
20% {
transform: translateY(-15px)
}
40% {
transform: translateY(0)
}
}
效果图
bounce-loading.gif
总结
这样我们就完成了一个简单的CSS3加载等待动画，上面我截的效果图有点掉帧的情况，实际效果时候很流畅的。
