Kombinieren Keyframes Animationen in einem

Question

Ich habe ein Bild, das ich über ein div "gehen" wollen dann am Ende horizontal umkehren und zurück in die andere Richtung gehen. Ich habe hier einen Codepen erstellt: https://codepen.io/jessiemele/pen/rGQWWE. Die tinyWalk-Animation wird gegen Ende sehr hüpfend, kurz bevor sie sich dreht und zum Start zurückkehrt, ich nehme an, dass es sich um das Bild handelt, das die Spitze des Divs trifft. Ich frage mich, ob es eine Möglichkeit gibt, diese 2 Animationen zu kombinieren, um sie einfach auf dem Bild auszuführen, so dass ich kein tinyWalk auf dem Div ausführen muss. Mein Code ist hier:

<div class="catapillarBox"> 
<img src="https://i.imgur.com/0XPhWfE.jpg" class="caterpillar" 
alt="caterpillar drawing" /> 
</div> 
</div> 
<div class="blueBox"> 
<h5>I'm your box</h5> 
</div> 

CSS:

.blueBox { 
    background-color: #1d88eb; 
    width: 875px; 
    height: 400px; 
    margin-top: 125px; 
    padding-bottom: 70px; 
    margin-top: 150px; 
    z-index: 2; 
} 
img.caterpillar { 
    position: absolute; 
    top: 125px; 
    left:0; 
    -webkit-animation: walk 20s forwards infinite linear; 
    animation: walk 20s forwards infinite linear; 
    z-index: 3; 
} 
@keyframes walk{ 
    0% { left: 0; transform: rotateY(0deg);} 
    49% {transform: rotateY(0deg);} 
    50% {left: 700px; transform: rotateY(180deg);} 
    99% {transform: rotateY(180deg);} 
    100% {left: 0; transform: rotateY(0deg); 
}  
.catapillarBox { 
    width: 200px; 
    height: 100px; 
    -webkit-animation: tinywalk 500ms linear alternate infinite; 
    animation: tinywalk 500ms linear alternate infinite; 
} 
@keyframes tinywalk { 
    0%{ transform: rotate(0);} 
    25%{ transform: rotate(-1deg);} 
    50%{ transform: rotate(1deg);} 
    75%{ transform: rotate(-1deg);} 
    100%{ transform: rotate(0);} 
} 

Answer 1

Jessica, habe ich eine codepen here, die Ihr Problem lösen sollte. Es sieht so aus, als ob deine Drehung deines Bildes einfach zu drastisch für dich ist. Ich habe es auf eine 0,2-Grad-Drehung bearbeitet. Versuchen Sie folgendes CSS:

.blueBox { 
    background-color: #1d88eb; 
    width: 875px; 
    height: 400px; 
    margin-top: 125px; 
    padding-bottom: 70px; 
    margin-top: 150px; 
    z-index: 2; 
} 
.catapillarBox { 
    width: 200px; 
    height: 100px; 
    -webkit-animation: tinywalk 500ms linear alternate infinite; 
    animation: tinywalk 500ms linear alternate infinite; 
} 
@keyframes tinywalk { 
    0%{ transform: rotate(0);} 
    25%{ transform: rotate(-0.2deg);} 
    50%{ transform: rotate(0.2deg);} 
    75%{ transform: rotate(-0.2deg);} 
    100%{ transform: rotate(0);} 
} 
img.caterpillar { 
    position: absolute; 
    top: 125px; 
    left:0; 
    -webkit-animation: walk 20s forwards infinite linear; 
    animation: walk 20s forwards infinite linear; 
    z-index: 3; 
} 
@keyframes walk{ 
    0% { left: 0; transform: rotateY(0deg);} 
    49% {transform: rotateY(0deg);} 
    50% {left: 700px; transform: rotateY(180deg);} 
    99% {transform: rotateY(180deg);} 
    100% {left: 0; transform: rotateY(0deg); 
}