CSS / SVG Animation Effect - Three Bouncing Squares - Right Timing
I am essentially trying to recreate the timing of these jumping circles:
https://dribbble.com/shots/2991038-Typing-Status
All three laps jump at the same speed, but the first lap does not start again until the third lap has landed. For the life of me, I cannot properly delay each lap in order to choose the right time. I have the one where the second circle jumps when the first one jumps half way, but I can't get to where the first one starts after the third one lands. Perhaps my mitigation should be adjusted in the same way as the timing?
Source: https://jsfiddle.net/88ybodjk/
@keyframes jump {
0% {
transform: translateY(0px);
}
33% {
transform: translateY(-12px);
}
100% {
transform: translateY(0px);
}
}
.square-1 {
animation: jump 2s ease infinite;
}
.square-2 {
animation: jump 2s .6s ease infinite;
}
.square-3 {
animation: jump 2s 1.2s ease infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
<rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
<rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
<rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
</svg>
source to share
Let's say that you only want a circle "in the air" at a time.
Then the keyframes with the transition applied should only cover 33%.
This gives:
@keyframes jump {
0% {
transform: translateY(0px);
}
16.5% {
transform: translateY(-12px);
}
33%, 100% {
transform: translateY(0px);
}
}
.square-1 {
animation: jump 2s ease infinite;
}
.square-2 {
animation: jump 2s .6s ease infinite;
}
.square-3 {
animation: jump 2s 1.2s ease infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
<rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
<rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
<rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
</svg>
However, due to the weakening, this does not give the correct illusion.
It would be better to slightly increase the duration of the reworked part
@keyframes jump {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(-12px);
}
50%, 100% {
transform: translateY(0px);
}
}
.square-1 {
animation: jump 2s ease infinite;
}
.square-2 {
animation: jump 2s .6s ease infinite;
}
.square-3 {
animation: jump 2s 1.2s ease infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">
<rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>
<rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>
<rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>
</svg>
source to share