HTML
<svg viewBox="0 0 1000 500">
<circle r="50" cx="50" cy="250"></circle>
<circle r="50" cx="150" cy="250"></circle>
<circle r="50" cx="250" cy="250"></circle>
<circle r="50" cx="350" cy="250"></circle>
<circle r="50" cx="450" cy="250"></circle>
<circle r="50" cx="550" cy="250"></circle>
<circle r="50" cx="650" cy="250"></circle>
<circle r="50" cx="750" cy="250"></circle>
<circle r="50" cx="850" cy="250"></circle>
<circle r="50" cx="950" cy="250"></circle>
</svg>
SCSS
$duration: 1.5s;
svg {
width: 100vw;
height: 80vh;
}
body {
background: #333;
display: flex;
align-items:center;
justify-content: center;
flex-direction: column;
}
circle {
transform: translate(0, -100px);
animation: ball $duration cubic-bezier(0.420, 0.000, 0.580, 1.000) infinite;
transform-origin: 50% 50%;
}
@for $i from 1 through 10 {
circle:nth-child(#{$i}) {
fill: hsl($i*20 - 20, 70%, 70%);
animation-delay: $i * ($duration / -10);
transform-origin: -200px + 120px * $i 250px ;
}
}
@keyframes ball {
0%,
100% {
transform: translate(0, 100px) scale(1);
}
50% {
transform: translate(0%, -100px) scale(0.3);
}
}
