Question

我想问一下是否可以让css动画更平滑？因为现在我遇到的问题是我的动画制作过程中的每个步骤都会出现问题＃34;并且它不是那么好的平滑动画。你可以在这里：

＆＃13;

@-webkit-keyframes rocketStart {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  5% {
    transform: translate(0, 20px) rotate(20deg);
  }
  10% {
    transform: translate(-10px, 40px) rotate(25deg);
  }
  20% {
    transform: translate(-20px, 60px) rotate(40deg);
  }
  30% {
    transform: translate(-45px, 80px) rotate(55deg);
  }
  40% {
    transform: translate(-85px, 105px) rotate(68deg);
  }
  50% {
    transform: translate(-195px, 135px) rotate(77deg);
  }
  100% {
    transform: translate(-400px, 300px);
  }
}
.rocket-move-one {
  -webkit-animation-name: rocketStart;
  animation-name: rocketStart;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.rocket {
  position: absolute;
  width: 45px;
  height: 92px;
  left: 485px;
  top: -50px;
  background-color: red;
}

＆＃13;

<div style="width:100%; height:600px; position;relative;">
  <div class="rocket-move-one rocket"></div>
</div>

＆＃13;

Answer 1

试试这个：

/META-INF
    MANIFEST.MF
/com
    /some classes

Answer 2

使用animation-timing-function: linear;获得均匀的动画速度。

您可能需要调整以下示例中的关键帧，以实现更平滑的过渡。

@-webkit-keyframes rocketStart {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: translate(-195px, 135px) rotate(77deg);
  }
  100% {
    transform: translate(-400px, 300px) rotate(0deg);
  }
}
.rocket-move-one {
  -webkit-animation-name: rocketStart;
  animation-name: rocketStart;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.rocket {
  position: absolute;
  width: 45px;
  height: 92px;
  left: 485px;
  top: -50px;
  background-color: red;
}

<div style="width:100%; height:600px; position;relative;">
  <div class="rocket-move-one rocket"></div>
</div>

Answer 3

只需使用

-webkit-transition:all 1s ease;

并提及animation-timing-function

css动画问题的步骤

3 个答案: