css 动画问题与步骤

Question

请问有没有办法让css动画更流畅一些？因为现在我遇到的问题是，我的动画在每一步都“中断”，而且动画不是那么流畅。你可以在这里看到:

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

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

Answer 1

试试这个:

.rocket-move-one {
    animation-timing-function: linear;
}