How to make my infinite linear animation smooth?

Question

When the animation resets, there is a visible break in the animation.

Here is what I have:

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

How can I make it smooth and unnoticeable?

related : https://stackoverflow.com/q/54909275/8620333 / https://stackoverflow.com/a/51734530/8620333 — Temani Afif, Aug 21 '19 at 18:33

score 5 · Accepted Answer · edited Aug 21 '19 at 14:43

It appears that background-size: 200% 200%; and background-position: 100% 0%; aren't playing nicely together. If you set background-position: 200% 0%; it runs smoothly.

By setting the animation to be twice as long we can make sure it still looks like its moving at the same rate.

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

How to make my infinite linear animation smooth?

1 Answers1