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.

Demos

• 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

Documentation

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

Specification

Editor's draft

Status in Chromium

Blink components: Blink

Enabled by default (tracking bug) in:

• Chrome for desktop release 77
• Chrome for Android release 77
• Android WebView release 77

Consensus & Standardization

• Firefox: Shipped/Shipping
• Edge: No signal
• Safari: No signal
• Web Developers: No signals

Owner

• kevers@chromium.org

Last updated on 2020-12-21