CSS steps() Function

Definition and Usage

CSS's steps() The function is used to create step timing functions for animations.

This function divides the animation duration into equal-length intervals specified by the number (n). For example: If n is 4, the animation will be divided into 4 parts. It will divide the duration from 0% to 100% into 4 parts; namely, 0%-25%, 25%-50%, 50%-75%, and 75%-100%

Example

Create different step timing functions for animations:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Try It Yourself

CSS Syntax

steps(n, step-position)
Value Description
n Required. Specify the step/interval number.
step-position

Optional. Specify the time at which the jumps between values occur. Use one of the following keywords:

  • jump-start or start: The first step occurs at the beginning of the animation
  • jump-end or end: The last step occurs at the end of the animation. 'end' is the default value
  • jump-none: No early or delayed jumps occur
  • jump-both: Both early and delayed jumps occur simultaneously

Technical Details

Version: CSS Easing Functions Level 1

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Related Pages

Reference:CSS animation Property

Reference:CSS animation-timing-function Property