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

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>

如何使它平滑且不引人注意？

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>