Jumps: The New Steps() in Web Animation

This article discusses new easing options which are, as of the writing, available only in Firefox 65+. Demos will be fully realized only in Firefox until the other browsers implement this.

The first big change to web animation easings (aka timing functions) is upon us. After some discussions, updates to the specification, and initial implementations as a separate function, Firefox 65 introduces four new options for the steps() function.

• jump-start
• jump-end
• jump-both
• jump-none

How do these new values compare to what we already had, and when are the best times to use each one?

Easings and the steps() function

First, let’s take a step back and discuss what easings even are and what the steps() function allows us to do.

Easings allow us to change how a transition, CSS animation, or Web Animations API animation completes over time.

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}
@keyframes move {
  100% {
    transform: translateX(200px);
  }
}

With a linear easing, everything moves at a steady pace. If we change that to ease-in we will have something that starts slower and speeds up as it gets to the end of its animation.

Steps are a bit different, as we can tell the animation to have a specific number of distinct frames. So changing the easing to steps(2), for example, would give an animation with only two states, a starting position and an ending one.

How steps() determines each step interval is based on a second (and optional) parameter. This is where our new values come into play and join the two existing values — start and end.

Read full article on https://danielcwilson.com/blog/2019/02/step-and-jump/