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

Specification link

Status: Specification being incubated in a Community Group

Status in Chromium

Blink components: Blink

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

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

Owner

• kevers@chromium.org

Last updated on 2020-12-21