用 CSS3 动画功能，做一个有逼格的加载动画

共计 2736 个字符，预计需要花费 7 分钟才能阅读完成。

主要用到的知识点：
参阅菜鸟教程：http://www.runoob.com/css3/cs…

frame
animation / 动画延时
flex

实现
HTML
<div class=”loading”>
<div class=”loading-1 loading-item”></div>
<div class=”loading-2 loading-item”></div>
<div class=”loading-3 loading-item”></div>
<div class=”loading-4 loading-item”></div>
</div>
说明：loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式

CSS 重点

如果了解 less，看这个更清晰些，如果不懂，看下面生成的 css
LESS
@red: #FF3B30;
@orange: #FF9500;
@black: #373737;
@green: #4CD964;

@load-box-height: 50px;

.loading{
height: @load-box-height; // 定死容器的高度，不然会上下浮动
margin: 20px 0;
display: flex;
align-items: center; // 横向排列子元素
justify-content: center; // 纵向排列子元素
.loading-item{
height: @load-box-height;
width: 10px;
margin-right: 10px;
&:last-child{// 去掉最后一个的右边距
margin-right: 0;
}
}
&-1{
//【参数分别为】动画 key 名，一次动画的持续时间，循环方式，过滤规则，动画起始延时时间
-webkit-animation: load-frame 1s infinite linear 0s;
-o-animation: load-frame 1s infinite linear 0s;
animation: load-frame 1s infinite linear 0s;
background-color: @red;
}
&-2{
-webkit-animation: load-frame 1s infinite linear 0.25s;
// 通过控制延时，只用一个 keyframe 就能做出渐变效果
-o-animation: load-frame 1s infinite linear 0.25s;
animation: load-frame 1s infinite linear 0.25s;
background-color: @orange;
}
&-3{
-webkit-animation: load-frame 1s infinite linear 0.5s;
-o-animation: load-frame 1s infinite linear 0.5s;
animation: load-frame 1s infinite linear 0.5s;
background-color: @black;
}
&-4{
-webkit-animation: load-frame 1s infinite linear 0.75s;
-o-animation: load-frame 1s infinite linear 0.75s;
animation: load-frame 1s infinite linear 0.75s;
background-color: @green;
}
}

@keyframes load-frame {
0% {height: @load-box-height;}
50% {height: @load-box-height * 0.25;}
// 设置动画中间的高度，此时为最低，为原高度的 25%
100% {height: @load-box-height;}
}

@-webkit-keyframes load-frame {// safari & chrome
0% {height: @load-box-height;}
50% {height: @load-box-height * 0.25;}
100% {height: @load-box-height;}
}
CSS
.loading {
height: 50px;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
}
.loading .loading-item {
height: 50px;
width: 10px;
margin-right: 10px;
}
.loading .loading-item:last-child {
margin-right: 0;
}
.loading-1 {
-webkit-animation: load-frame 1s infinite linear 0s;
-o-animation: load-frame 1s infinite linear 0s;
animation: load-frame 1s infinite linear 0s;
background-color: #FF3B30;
}
.loading-2 {
-webkit-animation: load-frame 1s infinite linear 0.25s;
-o-animation: load-frame 1s infinite linear 0.25s;
animation: load-frame 1s infinite linear 0.25s;
background-color: #FF9500;
}
.loading-3 {
-webkit-animation: load-frame 1s infinite linear 0.5s;
-o-animation: load-frame 1s infinite linear 0.5s;
animation: load-frame 1s infinite linear 0.5s;
background-color: #373737;
}
.loading-4 {
-webkit-animation: load-frame 1s infinite linear 0.75s;
-o-animation: load-frame 1s infinite linear 0.75s;
animation: load-frame 1s infinite linear 0.75s;
background-color: #4CD964;
}
@keyframes load-frame {
0% {height: 50px;}
50% {height: 12.5px;}
100% {height: 50px;}
}
@-webkit-keyframes load-frame {
0% {height: 50px;}
50% {height: 12.5px;}
100% {height: 50px;}
}
最后，WA-LA，完成