CSS动画往返旋转移动

Question

我正在尝试仅使用CSS制作非常简单的动画。我的目标是：物体在200像素和800像素之间来回移动，当物体达到边缘时，它会旋转方向。

.cow {
    width: 300px;
    position: absolute;
    top: 50px;
    left: 0px;
    animation: cowmove 5s linear both infinite alternate,
                rotate 0.3s linear 5s; 

}

@keyframes cowmove{
    from{transform: translateX(200px);}
    to{transform: translateX(800px);}
}

@keyframes rotate{
    from{transform: rotateY(0);}
    to{transform: rotateY(180deg);}
}

这是我目前编写的代码，但对于旋转部分我感到困难。

使用当前代码，对象将从200像素移动到800像素，瞬间传送到200像素点并旋转，再次瞬间传送回800像素点并移回200像素。

可能有非常简单的解决方案，但我正在为此感到头疼 :(

谢谢，

- Eric Hobin Yoo

Answer 1

不需要创建两个@keyframes，你可以像这样在一个@keyframes中完成两个变换：

<div class="translate"></div> 

<style>
.translate{
  height: 100px;
  width: 100px;
  background: #151f28;
  transition: 0.5s;
  animation: cowmove 4s infinite;                
} 
 
@keyframes cowmove{
    0% {
      transform: translateX(100px) rotateY(0deg);
    }
    49% {
      transform: translateX(500px) rotateY(0deg);
    }
    50% {
      transform: translateX(500px) rotateY(360deg);
    }
    100% {
      transform: translateX(100px) rotateY(360deg);
    }
}
</style>

- Ömürcan Cengiz

Answer 2

如果您正在处理相同的属性，请将其仅设置为一个动画：

.cow {
  width: 80px;
  height: 80px;
  background: linear-gradient(blue 50%, red 0);
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 0px;
  animation: cowmove 5s linear infinite;
}

@keyframes cowmove {
  0% {
    transform: translateX(100px) rotate(0);
  }
  30% {
    transform: translateX(400px) rotate(0);
  }
  50% {
    transform: translateX(400px) rotate(180deg);
  }
  80% {
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    transform: translateX(100px) rotate(360deg);
  }
}

<div class="cow"></div>

- Temani Afif

---

哦，拜托...你不能再等36秒钟吗？ :) - Ömürcan Cengiz