See the Code - See it Full Page - See Details
Firefox 65 is the first browser to introduce new animation easings, by allowing four new options for the `steps()` function. Well... two new options and two renames. And one is mainly in there for completeness. So really... it's about the new `jump-none` option. Steps has always been a good option for rotating something from 0deg to 360deg because it effectively skips over the start or end (one could even say it jumps over one of them). Translates have been trickier because of the same jumping behavior. Very often you want the starting position and ending position to be represented visually. In 2017 the new easing `frames()` was introduced to handle this scenario, and after revisions and merging back into the existing `steps()` it landed in a stable browser as of late January, 2019. This is handled with the new `jump-none` option. The other new option is `jump-both` which divides its steps into everything but the start and end, jumping/skipping both.
This Pen uses: HTML, CSS, JavaScript, and