如何使我的无限线性动画更加流畅？

Question

当动画重置时，动画会出现明显的中断。以下是我的内容：

@keyframes AnimationName {
  0% {
    background-position: 100% 0%
  }
  100% {
    background-position: 0% 0%
  }
}

.myanimation {
  width: 50px;
  height: 150px;
  background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);
  animation: AnimationName 2s linear infinite;
  background-size: 200% 200%;
}

<div class="myanimation"></div>

如何使其顺畅且不可察觉？

- varnaud

---

相关：https://dev59.com/sbLma4cB1Zd3GeqPWipP / https://dev59.com/hVUK5IYBdhLWcg3wgQHd#51734530 - Temani Afif

Answer 1

看起来background-size: 200% 200%;和background-position: 100% 0%;不太兼容。如果将background-position: 200% 0%;设为一定，它就会顺利运行。

通过将动画设置为两倍长，我们可以确保它看起来仍然以相同的速度移动。

@keyframes AnimationName {
  0% {
    background-position: 200% 0%
  }
  100% {
    background-position: 0% 0%
  }
}

.myanimation {
  width: 50px;
  height: 150px;
  background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);
  animation: AnimationName 4s linear infinite;
  background-size: 200% 200%;
}

<div class="myanimation"></div>

- itsallgoodie