Throttle css animation to only update every N milliseconds - css-animations

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