Animation timeline options

Discover the different options available for CSS animations and how to use them effectively.

Overview

Timeline can take a couple of options to fine-tune the animation. These are defined between the <> angle brackets.

Note that these options are available only for time-based animation timelines. For the scroll/trigger see here

The list of available options for the sequenced and offset-based animation timelines:

  • duration - Animation duration
  • iterations - Number of iterations (repeats)
  • direction - Should play forward or alternate back and forth
  • pause - Add pause between animation iterations
  • delay - Sets the delay of animation start
  • 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 Accepted values Default Example Shorthand Example
duration s | ms 350ms <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 Accepted values 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 Accepted values 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

To add a pause between iterations, add a pause option.

Name Accepted values Default Example Shorthand Example
pause s | ms - <pause: 1s> -

delay

To add a delay before the start of the animation, add a delay option.

Name Accepted values Default Example Shorthand Example
delay s | ms - <delay: 1s> -

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.

Note! Only for the sequenced animation

Name Accepted values 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

You can override the parent timeline options by setting individual options at the property level. For example, if the overall animation duration is 6s, but you want a specific step to last only 0.25s, you can apply a custom option to that 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.