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

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

将关键帧动画组合成一个

1 个答案: