Throttle css animation to only update every N milliseconds

Question

Certain types of css animations are more performant as js due to the fact that they only need to update every ~20+ milliseconds.

For instance, making a gradient that very subtly (slowly) changes its color over minutes.

Is there a way to make css animations only update every N milliseconds if it's a case where the user would never see the difference (but technically there could be one every frame)?

Answer 1

Found it. There's a steps() timing function that can be used for animations.

animation-timing-function: steps(1000);

.RaceTrack {
  position: relative;
  height: 1px;
  width: 100%;
  background: yellow;
  border-top: 25px solid black;
  border-bottom: 25px solid black;
}

.Snail {
  position: absolute;
  top: -25px;
  left: 0px;
  
  animation: snail-race;
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.Snail.steps {
  top: 0px;
  animation-timing-function: steps(1000);
}

@keyframes snail-race {
  from { left: 0px; }
  to { left: 100%; }
}

<div class="RaceTrack">
  <div class="Snail">?</div>
  <div class="Snail steps">?</div>
 </div>

Top snail animates every frame<br>
Bottom snail animates every 100ms