Steps() - CSS Function

Syntax diagram of steps().

On the diagram, the terms in bold are the predefined terms in CSS, the others are described below:

• integer is an integer greater than 1.

Description of the steps() function.

The function steps() defines a jerky progression for animations or transitions.

The steps() value can be used with the following properties:

• animation-timing-function : Defines the easing function to be used during an animation.
• transition-timing-function : A property that defines the easing function to be used during a transition.

Syntaxes of the steps() function.

• animation-timing-function: steps(5, start); n m

  n is the number of steps. It's an integer greater than or equal to 0, unless it is followed by jump-none, in which case it must be greater than 1.

  m is a parameter that specifies the behavior of the animation on the first and last steps. This parameter also affects how the animation is resumed when it runs multiple times in a row.
  When this parameter is omitted, it defaults to end.

  The animations or transitions following steps() are a series of jumps and pauses, as you can see in the diagrams below. The m parameter determines whether the progression starts with a pause or a jump, and how it ends.

  The following values are accepted. The default value is end.

  start or jump-start.

  The first jump happens right at the beginning of the animation, and it ends with a platter. Each platter has a duration that is calculated as follows.

  

  end ou jump-end

  The last jump happens at the end of the planned animation time.

  

  jump-both

  There's a jump right at the start of the animation and another at the end. As a result, there's one less step, and each step lasts a bit longer than in the previous two cases.

  

  jump-none

  The animation starts and ends with a platter. There is one more platter than the specified n. The duration of each step is calculated using the formula:

  

• animation-timing-function: step-start; animation-timing-function: step-end;

  These two values are used with completely different syntax.

  step-start is equivalent to steps(1, start).
  step-end is equivalent to steps(1, end)

Simulator.

The simulator is mainly useful for understanding how the second parameter of the steps() function works. The number of steps is actually fixed at 5. The blue block serves as a reference for comparison.

With values other than jump-none, it sometimes feels like the green block doesn't start from the beginning of its run or doesn't go all the way to the end. This is because the progression starts or ends with a jump rather than a platter.

Browsers compatibility with steps() function.

Animations and the steps() function are well supported by current browsers.

1

Animations
support

2

steps()
function

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the steps() function.

• CSS Easing Functions Level 1

  Regarding steps() First definition of the steps() easing function.
  

  February 21, 2017

  Working Draft.

  

  April 30, 2019

  Candidate Recommendation.

  

  

• CSS Easing Functions Level 2

  Regarding steps() No change to the steps() function.
  

  August 29, 2024

  Working Draft.

  

  

  

Other easing functions.

The function steps() is described in the module CSS Easing Functions. Note that other easing functions are simple values and not listed below: linear, ease, ease-in, etc.

Functions: