CSS3-读取效果的动画实现

上次分享了四个CSS3的加载动画，今天继续（标题接上一次）。

在线demo：http://liyunpei.xyz/loading.html （持续更新）

请注意：代码中的关键帧动画有的用的linear曲线，而有的用的是ease曲线。前者是匀速执行，整个动画以固定的速度执行；后者有加速减速阶段，在动画开始时加速，在动画将要结束时减速（比如我在50%的地方设置了一个动画，那么在快要到达50%的时候，动画开始减速，在超过50%的时候动画开始加速，表现在页面上会有一个短暂的停留效果，效果七、效果八最为明显）

五、效果五

小球爬楼梯的效果，第一看到这个效果，本以为会有点儿复杂，结果写出来之后觉得也没有那么难。

首先将楼梯定位至右上角，执行从右上至左下的运动动画，并为每一个楼梯设置animation-delay的值（我这里用了三个楼梯，总时长1.8s,animation-delay值分别为0s,-0.6s,-12s）

{:;:;:;
      }{:;
      }{:;:;:;
      } 

查看更多关于CSS3-读取效果的动画实现的详细内容...