个人网站：www.dzyong.top
微信公众号：《前端筱园》
本期讲解两个系列的加载效果，先看效果
这两种效果在网站中都会经常遇到，我会分别以一个例子来进行详细的剖析。
CSS加载动画万变不离其宗，那就是animation，可以把它看做AE中的导轨，我们只需要在合适的点位让它展现本应该展现的状态即可。
本期的加载动画与上期的有所不同，本期要用到animation的延迟时间属性，上面展示的而每个动画都是由多个相同元素组成，仔细观察，其实每个元素的运动周期是完全相同的，唯一不同的地方就在于起点时间。因此我们只要合理的掌握每个元素的开始时间点即可。
关键点：动画开始时间、动画周期点的选择
先看一下第一个要讲解的效果
这里直接HTML结构和CSS的基础样式比较简单，就不再过多的讲解，直接上代码
HTML：
<div class="warp"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div></div>
CSS:
.warp{position: relative;height: 100px;margin: 40px;}/* 线型动画 */.line{display: inline-block;position: absolute;bottom: 0;width: 12px;height: 15px;margin: 3px;border-radius: 12px;background: #69d3de;}
关键的是动画部分，这里的每个元素都共用同一个动画，整个过程可以看出只是元素的高度在发生变化。可以定格3个点，起始高度->最高高度->起始高度。
@keyframes line-loading{0%{height: 15px;}50%{height: 35px;}100%{height: 15px;}}
仔细观察的话可以看出一个动画周期是对称的，即高度越小变化的速度越慢。那么这里的动画速度曲线应为ease-in-out（动画以低速开始和结束）。若周期为1.5s，本例子每个元素的起始时间分别为0/0.3/0.6/0.9。当然你也可以设置成其他的开始时间序列，所看到的效果也会有所差别，不过一定要成等比。
.line1{left: 5px;animation: line-loading 1.5s 0s ease-in-out infinite;}.line2{left: 25px;animation: line-loading 1.5s .3s ease-in-out infinite;}.line3{left: 45px;animation: line-loading 1.5s .6s ease-in-out infinite;}.line4{left: 65px;;animation: line-loading 1.5s .9s ease-in-out infinite;}
第二个系列
这个效果与上面一个大同小异，只是从高度的维度变为了位置，但是仔细观察的话，还加入了颜色的改变，所以这个动画对时间点的选择与状态把控十分重要。
HTML：
<div class="warp"><div class="ball ball1"></div><div class="ball ball2"></div><div class="ball ball3"></div><div class="ball ball4"></div><div class="ball ball5"></div></div>
CSS基础：
.ball{height: 15px;width: 15px;display: inline-block;border-radius: 50%;background: pink;position: relative;top: 40px;}
先分析一下整个周期的过程：起点位置》上升到最高点》回到起点位置》等待一段时间（注意这里不是回到起点后马上就改变了颜色）》改变另一种颜色》变回原颜色
运动周期分析完成后，根据每个点的状态可得到动画过程如下：
@keyframes ball-loading{0%{top: 40px;background: pink;}25%{top: 10px;background: pink;}50%{top: 40px;background: pink;}65%{background: pink;}85%{background: #f7eaec;}100%{background: pink;}}
每个元素的开始时间参考如下：
.ball1{animation: ball-loading 2s 0s ease-in-out infinite;}.ball2{animation: ball-loading 2s .2s ease-in-out infinite;}.ball3{animation: ball-loading 2s .4s ease-in-out infinite;}.ball4{animation: ball-loading 2s .6s ease-in-out infinite;}.ball5{animation: ball-loading 2s .8s ease-in-out infinite;}
总结
本期的重点是如何去设定时间点及其对应的状态，对起点时间的把控。对于一个复杂的动画，先从一个周期分析，分析它经历了哪几个阶段，每个阶段的状态，然后再去选择时间点和动画线性曲线。
关注微信公众号《前端筱园》，博客内容同步
