CSS steps() Function
Example
Create different stepped timing function 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 »
Definition and Usage
The CSS steps() function is used to create a
stepped timing function for animations.
This function divides the animation duration into a specified number (n) of equal-length intervals. For example: if n is 4, then it will divide the animation in 4 parts. It divides the duration from 0% to 100% into 4 parts; which are 0%-25%, 25%-50%, 50%-75%, and 75%- 100% respectively.
| Version: | CSS Easing Functions Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| steps() | 77 | 79 | 65 | 14 | 64 |
CSS Syntax
steps(n,
step-position)
| Value | Description |
|---|---|
| n | Required. Specifies the number of steps/intervals |
| step-position | Optional. Specifies when the jump between values occurs. Use one of the
following keywords:
|
Related Pages
CSS reference: CSS animation property.
CSS reference: CSS animation-timing-function property.
