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 duration
iterations - Number of iterations (repeats)
direction - Should play forward or alternate back and forth
skip-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>`

// Full name
// 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.

// Full name
// Shorthand name

Infinite number

So set infinite number of repeats use infinite.

// Full name
// 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.

// Full name
// Shorthand name

Alternate direction

direction: alternate will play the animation back-and-forth after it reaches the end.

// Full name
// 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.