在 CSS 中平滑地围绕对象旋转答案

【问题标题】：rotate around object smoothly in CSS在 CSS 中平滑地围绕对象旋转
【发布时间】：2018-08-07 07:04:15
【问题描述】：

我有两个图像在一个 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>

所以我想要的是这样的

通过第一个关键帧后，框会出现错误的旋转。而且动作也不是很顺畅，中间快，到终点慢。

有人可以帮我处理关键帧吗？

【问题讨论】：

这对我来说看起来很流畅。从 2014 年开始，在 i3 英特尔上的 Arch 上的 Chrome。所以甚至没有涉及到最新的硬件。
但旋转错误。你会在第一个关键帧之后看到错误的部分
至于中间的减速，你需要将缓动改为线性：w3 schools

标签： html css css-animations keyframe

【解决方案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>

【讨论】：

好答案！但我可以拒绝再发布一个，主要是为了改变对象绕角旋转的方式
@vals 我喜欢 +1 :) 它更像是汽车动画，不像我的，它更像是士兵的运动：p

【解决方案2】：

我从 Temani Afif 那里得到了答案，并稍作改动。

我设置了一个附加变换，在旋转后应用。这使得转弯变得平滑，因为物体沿着路径而不是在同一个地方旋转

按照 Martijn 的建议，我已将时间设置为线性

我已将其简化为使用单个关键帧规则，在翻转的 div 上设置延迟。

并把长边和另一边的时间片加长，使感知速度更恒定

结果：

#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 linear;
}

#bicycleFlipped {
  position: relative;
  top: -120px;
  animation: moveBicycleOriginal 20s -10s infinite linear;
}

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

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0) rotate(0deg) translate(0, -50px);
  }
  26% {
    transform: translate(350px, 0) rotate(0deg) translate(0, -50px);
  }
  30% {
    transform: translate(350px, 0) rotate(90deg)  translate(0, -50px);
  }
  46% {
    transform: translate(350px, 150px) rotate(90deg) translate(0, -50px);
  }
  50% {
    transform: translate(350px, 150px) rotate(180deg)  translate(0, -50px);
  }
  76% {
    transform: translate(0, 150px) rotate(180deg)  translate(0, -50px);
  }
  80% {
    transform: translate(0, 150px) rotate(270deg)  translate(0, -50px);
  }
  96% {
    transform: translate(0, 0) rotate(270deg)  translate(0, -50px);
  }
  to {
    transform: translate(0, 0) rotate(360deg)  translate(0, -50px);
  }
}

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

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

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

【讨论】：

【解决方案3】：

速度减慢/加速是因为动画时间（默认缓动），应该是“线性”的。

动画不正确的原因，是因为你取消了旋转。这可能会出乎意料，您可以使用 css transform 控制转换。您还可以使用transform 控制旋转。

#example{
    transform: rotate(10deg)
}
#example.changed{
    transform: translateX(100px);
}

在这个 sn-p 中，当您添加类 changed 时，您重新定义了转换，告诉它忘记 rotate 并设置 translateX。在此示例中，要同时保留它们：

#example.changed{
    transform: rotate(10deg) translateX(100px);
}

【讨论】：