将关键帧动画合二为一

Question

我有一张图片，我想 "walk across" 变成 div，然后在最后水平翻转并以另一种方式返回。我在这里创建了一个代码笔：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

Jessica，我创建了一个 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);
}

将关键帧动画合二为一

Combining keyframes animations into one

css

animation

keyframe

css-animations