CSS/SVGアニメーション効果 - 三のバウンススクエア - 正しいタイミング

Question

私は基本的にこれらの跳躍の円のタイミングを再作成しようとしている：すべての3つの円が同じ速度でジャンプしている

https://dribbble.com/shots/2991038-Typing-Status

が、第1の円は、第3の円が上陸するまで再び始まらない。私の人生では、タイミングを正しく取れるように各サークルを正しく遅延させることはできません。最初のものがジャンプの途中であるときに2番目の円がジャンプする場所に持っていますが、3番目の場所の後に最初の場所が始まる場所に移動できません。おそらく私のイージーは、タイミングだけでなく調整する必要がありますか？

出典：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>

Answer 1

のは、あなたが、同時に "空気中" のみの円をたいと言ってみましょう。

次に、トランジションが適用されたキーフレームは、33％しかカバーしていない必要があります。

これは与える：

@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>

をしかし、緩和する、これが正しいような錯覚を与えていません。

方が良いかもしれ移行部分

@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>