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.