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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41033913/article/details/88757097

经常可以在网上看到一些有趣的加载动画，其实并不需要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去压缩宽高，然后开始望左边跳动，这里需要写一下跳到半空中情况，要不然解析的时候这么知道你是要向上跳，我就写了在５％的时候跳到一半的过程，这个时候，需要写盒子的位置，用translate去控制位置，rotate去控制旋转的角度；最后面就是第一个阶段跳下来的过程，即到第二个盒子的位置，到此前２０％的动画完成

然后第一个盒子转身回来的时候也要进行动画的跳动，过程和跳过来一致，只是动画百分比改变。

用百分比去控制动画可以由很多效果，这里其实可以做成果冻的效果，有兴趣的话可以调一下样式，反正我调三个盒子是跳不动了，太难受了！

.upDown-1{
    animation: upDown1 infinite 3s ease;
}
@keyframes upDown1{
    0% {
        transform: translate(0px,0px) ;
        bottom: 100px
    }
    2%{
        transform: scale(.9,.6);
    }
    5%{
        transform: translate(-100px,-150px) scale(1,1) rotate(150deg);
    }
    20% {
        transform: translate(-200px,0px);
    }

    80%{
        transform: translate(-200px,0px);
    }
    88%{
        transform: translate(-100px,-150px) scale(.9,.6) rotate(90deg);
    }
    100%{
        transform: translate(0px,0px);
    }
}