将关键帧动画合并为一个

Question

我有一幅图像，我想“走过”一个div，然后在水平方向翻转并以另一种方式回头。我在这里创建了一个codepen：https://codepen.io/jessiemele/pen/rGQWWE。 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> 

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