How to use pure CSS to realize the animation effect of small ball jumping step (with source code)

This article gives you the content is about how to use the pure CSS to achieve the small ball jumping step animation effect (with source), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, which contains 5 elements representing 5 slabs:

<div class= "Loader" >    <span></span>    <span></span>    <span></ span>    <span></span>    <span></span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:black;}

Define Container Dimensions:

. loader {    width:7em;    height:5em;    font-size:40px;}

Draw 5 Steps:

. loader {    Display:flex;    Justify-content:space-between;    Align-items:flex-end;}. Loader span {    width:1em;    Height:1em;    Background-color:white;}

Use a variable to sort 5 steps from low to High:

. Loader span {    Height:calc (var (--n) * 1em);}. Loader Span:nth-child (1) {    --n:1;}. Loader Span:nth-child (2) {    --n:2;}. Loader Span:nth-child (3) {    --n:3;}. Loader Span:nth-child (4) {    --n:4;}. Loader Span:nth-child (5) {    --n:5;}

Increase the animation effect for the step to convert the sort direction:

. Loader span {    animation:sort 5s infinite;} @keyframes Sort {    0, 40%, 100% {        height:calc (var (--n) * 1em);    }    50%, 90% {        Height:calc (5em-(VAR (--n)-1) * 1em);    }

The following small ball animation, with a camouflage, so that 2 of the same color of the ball alternating movement looks like 1 small balls in the reciprocating movement.

Draw 2 small balls with pseudo elements:

. loader::before,.loader::after {    content: ';    Position:absolute;    Width:1em;    Height:1em;    Background-color:white;    border-radius:50%;    Bottom:1em;}. Loader::before {    left:0;}. loader::after {    left:6em;}

Increase the animation effect that makes the ball move upwards:

. loader::before,.loader::after {    animation:climbing 5s infinite;    Visibility:hidden;}. loader::after {    animation-delay:2.5s;} @keyframes Climbing {    0% {        bottom:1em;        visibility:visible;    }    10% {        bottom:2em;    }    20% {        bottom:3em;    }    30% {        bottom:4em;    }    40% {        bottom:5em;    }    50% {        bottom:1em;    }    50%, 100% {        visibility:hidden;    }}

Move upward while moving toward both sides, creating an animated effect on the upper steps:

. loader::before {    --direction:1;}. Loader::after {    --direction:-1;} @keyframes Climbing {    0% {        bottom:1em;        Left:calc (3em-2 * 1.5em * VAR (--direction));        visibility:visible;    }    10% {        bottom:2em;        Left:calc (3em-1 * 1.5em * VAR (--direction));    }    20% {        bottom:3em;        Left:calc (3em-0 * 1.5em * VAR (--direction));    }    30% {        bottom:4em;        Left:calc (3em + 1 * 1.5em * VAR (--direction));    }    40% {        bottom:5em;        Left:calc (3em + 2 * 1.5em * VAR (--direction));    }    50% {        bottom:1em;        Left:calc (3em + 2 * 1.5em * VAR (--direction));    }    50%, 100% {        visibility:hidden;    }}

Finally, add a personification effect to the action of the upper step:

@keyframes Climbing {    0% {        bottom:1em;        Left:calc (3em-2 * 1.5em * VAR (--direction));        visibility:visible;    }    7% {        Bottom:calc (2em + 0.3em);    }    10% {        bottom:2em;        Left:calc (3em-1 * 1.5em * VAR (--direction));    }    17% {        Bottom:calc (3em + 0.3em);    }    20% {        bottom:3em;        Left:calc (3em-0 * 1.5em * VAR (--direction));    }    27% {        Bottom:calc (4em + 0.3em);    }    30% {        bottom:4em;        Left:calc (3em + 1 * 1.5em * VAR (--direction));    }    37% {        Bottom:calc (5em + 0.3em);    }    40% {        bottom:5em;        Left:calc (3em + 2 * 1.5em * VAR (--direction));    }    50% {        bottom:1em;        Left:calc (3em + 2 * 1.5em * VAR (--direction));    }    50%, 100% {        visibility:hidden;    }}

Done!