时间戳

首页 > 解决方案 > 如何使我的无限线性动画流畅？

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

问题描述

当动画重置时，动画中会出现明显的中断。

这是我所拥有的：

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

我怎样才能让它光滑而不引人注目？

标签： htmlcss

解决方案

看起来，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>

推荐阅读