在CSS中顺畅地围绕对象旋转

Question

我有两个图像在DOM元素周围移动.但是它们的旋转是错误的,并且运动不顺畅.

我的小提琴

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite;
}

#bicycleFlipped {
  animation: moveBicycleFlipped 20s infinite;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0);
  }
  1% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(350px, 0);
  }
  26% {
    transform: translate(350px, 0) rotate(90deg);
  }
  50% {
    transform: translate(350px, 150px);
  }
  51% {
    transform: translate(350px, 150px) rotate(180deg);
  }
  75% {
    transform: translate(0, 150px);
  }
  76% {
    transform: translate(0, 150px) rotate(270deg);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes moveBicycleFlipped {
  from {
    transform: translate(350px, 0);
  }
  1% {
    transform: translate(350px, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 0);
  }
  26% {
    transform: translate(0, 0) rotate(90deg);
  }
  50% {
    transform: translate(0, -150px);
  }
  51% {
    transform: translate(0, -150px) rotate(180deg);
  }
  75% {
    transform: translate(350px, -150px);
  }
  76% {
    transform: translate(350px, -150px) rotate(270deg);
  }
  to {
    transform: translate(350px, 0);
  }
}

<div id="mainPage">
  <div class="bicycle" id="bicycleOriginal"></div>

  <p class="txt" id="mainTxt">DRAHTESEL</p>

  <div class="bicycle" id="bicycleFlipped"></div>
</div>

所以我想要的是这样的

通过第一个关键帧后,框进入错误的旋转.此外,它们不能平稳移动,中间越快,到达终点越慢.

有人可以帮我关键帧吗？

Answer 1

您需要始终保持在变换中定义的旋转,因为每个变换将覆盖前一个变换并删除旋转方式rotate(0).

为了使动画更准确,最后一个状态应该类似于第一个状态,以避免重新启动动画时的跳转.所以你应该去360deg相当于的旋转0deg.(就像你在翻译中所做的那样,你回到初始值).

然后,您可以animation-timing-function根据需要调整控制动画进度.

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite;
}

#bicycleFlipped {
  animation: moveBicycleFlipped 20s infinite;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(350px, 0) rotate(0deg);
  }
  26% {
    transform: translate(350px, 0) rotate(90deg);
  }
  50% {
    transform: translate(350px, 150px) rotate(90deg);
  }
  51% {
    transform: translate(350px, 150px) rotate(180deg);
  }
  75% {
    transform: translate(0, 150px) rotate(180deg);
  }
  76% {
    transform: translate(0, 150px) rotate(270deg);
  }
  98% {
    transform: translate(0, 0) rotate(270deg);
  }
  to {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes moveBicycleFlipped {
  from {
    transform: translate(350px, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 0) rotate(0deg);
  }
  26% {
    transform: translate(0, 0) rotate(90deg);
  }
  50% {
    transform: translate(0, -150px) rotate(90deg);
  }
  51% {
    transform: translate(0, -150px) rotate(180deg);
  }
  75% {
    transform: translate(350px, -150px) rotate(180deg);
  }
  76% {
    transform: translate(350px, -150px) rotate(270deg);
  }
  97% {
    transform: translate(350px, 0) rotate(270deg);
  }
  to {
    transform: translate(350px, 0) rotate(360deg);
  }
}

<div id="mainPage">
  <div class="bicycle" id="bicycleOriginal"></div>

  <p class="txt" id="mainTxt">DRAHTESEL</p>

  <div class="bicycle" id="bicycleFlipped"></div>
</div>