Animation timeline options
Discover the different options available for CSS animations and how to use them effectively.
Overview
Animation timeline can take couple of options to fine-tune the animation. These are defined between the <>
angle brackets.
The list of available options for fot the sequenced animation timeline:
duration
- Animation durationiterations
- Number of iterations (repeats)direction
- Should play forward or alternate back and forthskip-first
- Skip the first step (only discrete animations)
duration
Defines the whole animation duration. That means how long the animation should play from start to finish. If you have three steps with an animation duration of 3s
, each step takes 1s
to play.
Name | Value | Default | Example | Shorthand Example |
---|---|---|---|---|
duration |
s | ms |
0ms |
<duration: 3s> |
<3s> |
// Shorthand name
iterations
Specifies the number of times the animation should play. You can set a fixed number of repeats using {number}x
or use infinite
to loop the animation continuously.
Name | Value | Example | Default | Shorthand Example |
---|---|---|---|---|
iterations |
x | infinite |
0x |
<iterations: 3x> |
<3x> |
Fixed number
So set fixed number of repeats use {number}x
.
// Shorthand name
Infinite number
So set infinite number of repeats use infinite
.
// Shorthand name
direction
Determines the direction of the animation after it reaches the end. The default value is normal
, which restarts the animation from the beginning. Alternatively, you can use the alternate
value to make the animation play in reverse, creating a back-and-forth effect.
Name | Value | Default | Example | Shorthand Example |
---|---|---|---|---|
duration |
normal | alternate |
normal |
<direction: alternate> |
<alternate> |
Normal direction
direction: normal
will play the animation from the beginning after it reaches the end.
// Shorthand name
Alternate direction
direction: alternate
will play the animation back-and-forth after it reaches the end.
// Shorthand name
pause
delay
skip-first
In some cases, especially with looped non-alternate animations, you may want the animation to start from a specific value but then continue the loop without incorporating the initial value into the rest of the sequence. To achieve this, you can use the skip-first
option. This option prevents the animation from using the initial value (whether default or manually set) as a reference in the first step, allowing it to jump directly to the next step.
Name | Value | Default | Example | Shorthand Example |
---|---|---|---|---|
skip-first |
false | true |
false |
<skip-first: true> |
<skip-first> |
With skip-first
option
Without skip-first
option
Without the skipping the first step, the animation uses the initial values, which can cause unnatural “jumps”.
Options override
When you need, you can set the individual options on property-level to override the parent timeline options. For example if the animation is 6s
long, but you want the some step to be just 0.25s
, you can set the custom option to the specific properties.
Property-Level Options
Even that you define the global timeline options, you can fine-tune the specific ones on property-level.
In this example, the timeline duration
is set to 3s
, so each step takes 1s
to play. But the translateX
property in the first step has specific duration of 4s
and will repeat 3x
. Only then, the animation can continue to the next step. Also, the opacity
has duration of 0.5s
and will wait until the translateX
has finished.
The second step has a custom easing: spring
, but the global 1s
duration.