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

这是我到目前为止编写的代码，但是轮换对我来说很难。

使用当前代码，对象将从200px移至800px，传送到200px点并旋转，传送回800px点并移回到200px。

这可能是非常简单的解决方案，但是我很头疼：（

谢谢

Answer 1

由于您处理相同的属性，因此只能制作一个动画：

.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>

Answer 2

您可以像这样创建两个@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>

CSS动画旋转旋转

2 个答案: