How to use pure CSS to implement the animation of block jumping (with source)

This article gives you the content is about how to use the pure CSS to achieve the animation of the Block jump (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 2 child elements representing 1 girls and a group of boys (4), each span representing 1 persons (1 squares):

<figure class= "Container" >    <span class= "Girl" ></span>    <p class= "Boys" >        < span></span>        <span></span>        <span></span>        <span></span >    </p></figure>

Center display:

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

Define the container size and its child element layout:

. container {    width:8em;    Height:1em;    font-size:35px;    Display:flex;    Justify-content:space-between;}

Draw 5 squares and use a border as a guide to help locate:

. container span {    width:1em;    Height:1em;    border:1px dashed black; /* Auxiliary line */}.boys {    width:6em;    Display:flex;    Justify-content:space-between;}

Use pseudo-elements to style the elements, make them softer, fill in a different color for boys and boys, and delete the previous step's guides:

. container Span::before {        content: ';    Position:absolute;    Width:inherit;    Height:inherit;    border-radius:15%;    box-shadow:0 0 0.2em rgba (0, 0, 0, 0.3);}. Girl::before {    background-color:hotpink;}. Boys Span::before {    background-color:dodgerblue;}

The color of the 4 boys color gradually fade, add a bit of layering:

. Boys Span:nth-child (1):: Before {    filter:brightness (1);}. Boys Span:nth-child (2):: Before {    filter:brightness (1.15);}. Boys Span:nth-child (3):: Before {    filter:brightness (1.3);}. Boys Span:nth-child (4):: Before {    filter:brightness (1.45);}

Next, make the animation effect.

First increase the effect of female movement, while the color also do fade processing, after the other animation time to remain consistent, so the animation time is set to a variable:

. container span {    width:1em;    Height:1em;    --duration:3s;}. Girl {    animation:slide var (--duration) Ease-in-out Infinite;} @keyframes Slide {from    {        Transform:translatex (0);        Filter:brightness (1);    }    to {        Transform:translatex (Calc (8em-(1EM * 1.25)));        Filter:brightness (1.45);    }}

Then add the 1th boy to jump the animation effect, note that from 15% to 35% the origin of rotation is directly above the element:

. Boys span {    Animation:var (--duration) ease-in-out Infinite;}. Boys Span:nth-child (1) {    animation-name:jump-off-1;} @keyframes jump-off-1 {    0, 15% {        transform:rotate (0deg);    }    35%, 100% {        transform-origin: -50% Center;        Transform:rotate ( -180deg);    }}

Refer to the 1th male animation effect, and then increase the other 3 boys jump animation effect, the difference is only adjust the time of the keyframe, followed by 15% of the time:

. Boys Span:nth-child (2) {    animation-name:jump-off-2;}. Boys Span:nth-child (3) {    animation-name:jump-off-3;}. Boys Span:nth-child (4) {    animation-name:jump-off-4;} @keyframes jump-off-2 {    0, 30% {        transform:rotate (0deg);    }    50%, 100% {        transform-origin: -50% Center;        Transform:rotate ( -180deg);    }} @keyframes jump-off-3 {    0, 45% {        transform:rotate (0deg);    }    65%, 100% {        transform-origin: -50% Center;        Transform:rotate ( -180deg);    }} @keyframes jump-off-4 {    0, 60% {        transform:rotate (0deg);    }    80%, 100% {        transform-origin: -50% Center;        Transform:rotate ( -180deg);    }}

For the 1th male to increase the anthropomorphic animation effect, the effect is written in ::before pseudo-elements, the animation process is from normal to flattening, then stretching, then flattening, and finally return to normal, attention from 25% to 40% of the flattening deformation, because at this time the main element has been bake, so transform-origin the origin and from 5% to 1 5% the original point of the flattening deformation is different:

. Boys Span::before {    Animation:var (--duration) ease-in-out Infinite;}. Boys Span:nth-child (1):: Before {    filter:brightness (1);    animation-name:jump-down-1;} @keyframes jump-down-1 {    5% {        Transform:scale (1, 1);    }    15% {        Transform-origin:center bottom;        Transform:scale (1.3, 0.7);    }    20%, 25% {        transform-origin:center bottom;        Transform:scale (0.8, 1.4);    }    40% {        transform-origin:center top;        Transform:scale (1.3, 0.7);    }    55%, 100% {        Transform:scale (1, 1);}    }

Refer to the 1th boy ::before pseudo-element animation effect, and then add another 3 boys anthropomorphic animation effect, the difference is only adjust the key frame time, followed by 15% of the time:

. Boys Span:nth-child (2):: Before {animation-name:jump-down-2;}. Boys Span:nth-child (3):: Before {animation-name:jump-down-3;}. Boys Span:nth-child (4):: Before {animation-name:jump-down-4;}    @keyframes jump-down-2 {20% {transform:scale (1, 1);        } 30% {Transform-origin:center bottom;    Transform:scale (1.3, 0.7);        } 35%, 40% {Transform-origin:center bottom;    Transform:scale (0.8, 1.4);        } 55% {Transform-origin:center top;    Transform:scale (1.3, 0.7);    } 70%, 100% {transform:scale (1, 1);    }} @keyframes jump-down-3 {35% {transform:scale (1, 1);        } 45% {Transform-origin:center bottom;    Transform:scale (1.3, 0.7);        } 50%, 55% {Transform-origin:center bottom;    Transform:scale (0.8, 1.4);        } 70% {Transform-origin:center top;    Transform:scale (1.3, 0.7);    } 85%, 100% {transform:scale (1, 1); }} @keyframes Jump-down-4 {50% {Transform:scale (1, 1);        } 60% {Transform-origin:center bottom;    Transform:scale (1.3, 0.7);        } 65%, 70% {Transform-origin:center bottom;    Transform:scale (0.8, 1.4);        } 85% {Transform-origin:center top;    Transform:scale (1.3, 0.7);    } 100%, 100% {transform:scale (1, 1); }}

At this point, the animated effect of the girl moving from the left to the right has been completed.
By adding parameters to all animated properties, alternate All animations are executed back and forth, and the effect from the right to the left is realized:

. girl {    animation:slide var (--duration) Ease-in-out infinite Alternate;}. Boys span {    Animation:var (--duration) ease-in-out infinite Alternate;}. Boys Span::before {    Animation:var (--duration) ease-in-out infinite Alternate;}

Done!