做一个盒子跳动的加载动画

经常可以在网上看到一些有趣的加载动画，其实并不需要JS控制，只需要CSS去进行调节，需要用到的知识主要是CSS３的２D转换。

• 首先得生成四个小盒子，可以自己调喜欢的样式

类似于这个样子，为了后面好区分我就加了不同的颜色

• 其次再看需求是什么，我这里写的是第一个盒子左右滑动，如果遇到了盒子就跳动到滑动盒子的位置，然后不断循环

第一个盒子的animation样式

.scroll{
    animation: leftRight 3s infinite linear;
}
@keyframes leftRight{
    0%{
        transform: translate(0,0);
    }
    50%{
        transform: translate(600px,0);
    }
    100%{
        transform: translate(0,0);
    }
}

简要的意思就是，在动画５０％的时候盒子需要移动到最右边，动画完成的时候回到开始位置

剩余盒子就得依靠第一个盒子过来的位置去控制跳动的时间，可以简单的计算一下接下来动画开始的时间

我以第一个盒子为例简单的说明一下：

可以去想想一下盒子跳动的过程，首先由类似于一种弹簧压缩的过程，我们可以用到transform里面的scale去压缩宽高，然后开始望左边跳动，这里需要写一下跳到半空中情况&#