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

Source: Internet
Author: User
Tags visibility
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.