← Back to release summary

Support step timing functions jump-start|end|both|none

Category
JavaScript
Type
New or changed feature
Status
Enabled by default (Chrome 77)
Intent stage
Evaluate readiness to ship

Summary

The step timing functions jump-both, jump-none, jump-start and jump-end were introduced to the spec for easing functions in 2018. Two of these (jump-start and jump-end) are aliases for start and end. The remaining two provide increased flexibility for step transitions by enabling step functions in which both or neither endpoint has a discontinuous step. Previously, one and only one of the two endpoints could have a step discontinuity.

Motivation

This feature provides support for a richer set of step animations. Firefox already has support for jump-* step timing functions. Adding support in Chromium improves cross-browser interoperability.

Standards & signals

Docs: https://drafts.csswg.org/css-easing-1/#step-easing-functions

Samples: https://wpt.fyi/results/web-animations/timing-model/time-transformations/transformed-progress.html https://wpt.fyi/results/css/css-transitions https://wpt.fyi/results/css/css-easing

Explainers: https://danielcwilson.com/blog/2019/02/step-and-jump/ https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

View on chromestatus.com