Question

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

我的小提琴

＆＃13;

destinationFolder="~/destination"
searchFolder=$PWD

for folder in `ls -lrth $searchFolder| grep "^d"| awk -F '{print $9}'`
do
    fileCount=`ls $folder|wc -l`
    findCount=`find ${searchFolder}/${folder} -type f | xargs egrep -v "\(|\)"`

    if [[ $fileCount -eq $findCount ]]; then
        cp -rp $folder $destinationFolder
    fi
done

＆＃13;

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

＆＃13;

所以我想要的是这样的

destination

传递第一个关键帧后，框进入错误的旋转。此外，它们不能顺利移动，中间越快，到达终点时越慢。

有人可以帮助我使用关键帧吗？

Answer 1

您需要始终保持在变换中定义的旋转，因为每个变换将覆盖前一个变换，并且移除旋转意味着rotate(0)。

为了使动画更准确，最后一个状态应该类似于第一个状态，以避免在重新启动动画时跳转。所以你应该转到相当于360deg的{{1}}轮换。 （就像你在翻译时所做的那样回到初始值）。

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

0deg

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

Answer 2

速度减慢/加速是因为animationTiming（默认缓动），应该是'线性'。

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

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

在此代码段中，当您添加课程changed时，您重新定义了变换，告诉它忘记rotate并设置translateX。在这个例子中，为了保持它们：

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

Answer 3

我已经接受了Temani Afif的回答，并稍微改了一下。

我设置了一个aditional变换，在旋转后应用。这使得转弯是平滑，因为对象在路径之后而不是在同一个地方旋转

我已按照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>

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

3 个答案: