How to use pure CSS to achieve the animation effect of ball jumping steps (source code attached)

The content of this article is about how to use pure CSS to realize the animation effect of the ball jumping steps (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. You helped.

Effect preview

Source code download

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

Code Interpretation

Define dom, the container contains 5 elements, representing 5 steps:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Define container size:

.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 variables to sort the 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;
}

Add a conversion sorting direction for the steps Animation effect:

.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 animation of small balls uses a blinding method to make the alternating movement of two small balls of the same color look like one small ball doing reciprocating motion.

Use pseudo elements to draw 2 small balls:

.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;
}

Add the animation effect to make the ball move upward:

.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 to both sides while moving upward, Form the animation effect of going up the 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 an anthropomorphic effect to the action of going up the steps:

@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;
    }
}

You’re done!

Related recommendations:

How to use pure CSS to achieve an animation effect of a rotating bicycle wheel

The above is the detailed content of How to use pure CSS to achieve the animation effect of ball jumping steps (source code attached). For more information, please follow other related articles on the PHP Chinese website!