CSS 动画没有无缝运行

Question

我有一个简单的动画，我希望一个对象无缝上下 float 2rem。但有时当它到达动画的顶部/底部位置时，它会暂停一两秒钟。这是为什么？我该怎么做才能无缝且不间断地进行直接更改？

.toBeAnimated{
  position: fixed;
  top: 60%;
  left: 80%;
  width: 100px;
  height: 100px;

  background-image: url(./static/image.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  animation-name: floatingUpAndDown;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes floatingUpAndDown {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -2rem, 0);
  }
}

Answer 1

使用animation-timing-function值linear而不是ease。希望它能奏效。