CSS动画无法无缝运行

Question

我有一个简单的动画，我希望一个对象无缝地上下浮动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

使用动画定时功能值线性，而不是轻松。希望它能工作。