キーフレームのアニメーションを1つにまとめる

Question

私は画像を持っています。最後にdivを歩いて、横にフリップして逆にしたいというイメージがあります。私はcodepenをここに作成しました：https://codepen.io/jessiemele/pen/rGQWWE。 tinyWalkのアニメーションは、最後に向かって非常に弾力的になります。右に曲がって開始点に戻る前に、私はそれがdivの上部に当たっているイメージであると仮定しています。私はこれらの2つのアニメーションを結合してイメージ上でそれらを実行する方法があるかどうか疑問に思っていますので、divでtinyWalkを実行する必要はありません。私のコードはここにある：

<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

ジェシカ、私はあなたの問題を解決する必要がありますcodepen hereを作成しました。あなたのイメージのあなたの回転があなたの好みのためにあまりにも抜本的であるように見えます。私はそれを0.2度の回転で編集しました。次の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); 
}