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!