How to fix animation on gecko?

Question

Sass

Hello, I need to fix the animation blinking under non-webkit browsers (the main audience of mozila)
in Google Chrome, the animation is smooth, but in mozila it blinks due to engine optimization, are there any approaches to solve this problem
https://jsfiddle.net/unknowne/rgk1fn6e /2/
Does it make sense to rewrite the animation under svg to solve the problem? (I noticed that even in google chrome, at a low page height, the animation can twitch)
Or how to create such animations in general, you need without js (as it will be displayed in case of noscript)

Answer 1

There is a great answer on StackOverflow that describes the reason and solution (more like a hack, but it helps).
In short, add a microscopic rotate to your animation:

@keyframes animStar {
  from {
    transform: translateY(0) rotate(0.05deg);
  }
  to {
    transform: translateY(-200vh) rotate(0.05deg);
  }
} ;

UPD: Here is a bugreport (still open) about this and an explanation from the developer why it rotate()helps.