纳尼 为什么要加载动画 ？
用户在进行某些操作时，都要从服务器获取资源，这个过程都需要时间，为了减少用户等待中产生的焦虑与不安，我们应该在合理的时间内做出合理的安抚，告诉用户他的操作是有回应的，所以一个优雅的加载可的方式也可以做的非常有趣，让用户轻松自在的享受等待。
下面我来们看个案例：
经过一场址皮产品经理终于妥协了，效果图如下：
又一次灵魂对白：
UI小妹跟前端小哥一顿乱沟通，最终确认效果如下：
好了，我们言归正转，不扯那些有的没的了，接来就交给html5,css3 去实现了。
我先将主要的css3属性列出来
position 定位是跑不了的
animation css动画
@keyframes 桢
transform 变换
- 以上属性有不明白的，可以上菜鸟教程自行查看 ~_~
接下来全方位为你解析：
同心圆加载动画
先来解析一下结构
这个时候有人就会问，一个结构怎么画出两个圆？
before after
看到这两个应该熟悉了吧，我们利用这两个伪类选器，在....之前，在....之后。
只画了外圆的细节图，内圆的细节跟几乎是一样的，只不是内圆他是一开始就放大，外圆是一开始缩小，这个他们就错开了方向。
环球旋转360度动画
这个相对来说比较简单一些，同理先说结构，他的结构也只有一个，他有两个形状，在这里不需要伪类选器。
结构思路：
利用边框实现效果，边框分为四条边，只要一条边颜色跟其它边框颜色不一样就可以实现。
这个旋转的动画就比较简单了。
小球碰撞动画
经过前面两个加载动画的熏陶，应该对接下来的动画有点思路了吧，说难也不难，只要理解他的一个思路去计算就不复杂了。
这个碰撞动画我会分为几个步骤来解析。
首先来看一下结构
四个小球都需要一个载体来确定他们的定位，每个小球都有共同的样式，所以给他们一个共同的类名item
先确定定位 position
初始化结构
初始化位置
因为我们是交替运行的，所以要把四个小球先散开, 再把动画名称加上
关键桢
想要动画运行起来关键桢，是关键，首先我们来解析球的运行轨迹。
0% { } 100% { }
百分比来规定变化发生的时间，0% 是动画的开始，100% 是动画的完成。
如上图所示：0% 我们做了什么事情 100% 我们做了什么事情
200% -200% 一负一正 我这里解释一下：
正数表示物体往右或往下移动，负数表示物体往左或往上移动
到这里已经结束了
有人会问，楼主怎么不把代码贴出来？
嘿嘿 就是了防止那些直接拷代码的人。
