Css 将关键帧动画合并为一个动画

我有一个图像，我想“穿过”一个div，然后在末尾水平翻转，然后头朝后。我在这里创建了一个代码笔：。tinyWalk动画在接近尾声时会变得非常有弹性，就在它转向并返回开始之前，我假设它是从图像中撞到div顶部的。我想知道是否有一种方法可以将这两个动画组合在一起，只在图像上运行它们，这样我就不必在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>

---

杰西卡，我发明了一个密码笔可以解决你的问题。看起来你对图像的旋转对你来说太剧烈了。我将其编辑为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);
}

---

它看起来对我很有用（你的代码笔做了你所描述的事情）。你解决了吗？嗨，杰克，我刚更新了我的问题。我得到了来回和翻转的工作，但我看到了很多反弹与有tinyWalk上的div，而不是图像，这是非常明显的结束前，它翻转和走回开始。我想知道是否有一种方法可以将它们结合起来，并将动画仅显示在图像上。谢谢Jack，虽然这看起来更好，但最后我仍然看到tinywalk动画中有一点不同，是否有一种方法可以在图像上同时运行walk和tinywalk？让我看看Jessica，以保持相同的解决方案（使用旋转），只需使旋转随着移动到行走动画中的距离逐渐变小即可。再次检查我的密码笔。我已经更新了。您可以根据自己的喜好更改度旋转，但只需在您走得更远时使旋转变小（达到50%），然后在50%-100%之间使旋转变大。要获得真正平滑的动画，您需要添加更多关键帧。我会让你决定的。

.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);
}