CSS animation-delay

The animation-delay property specifies a delay for the start of an animation. It allows you to delay the start of an animation effect.

The value of animation-delay can be specified in seconds (s) or milliseconds (ms).

Here is the syntax for using animation-delay:


.element {
  animation-name: animation-name;
  animation-duration: 3s;
  animation-delay: 2s; /* Delay the animation by 2 seconds */
}

Let's see an example using fictional data:

Result:

In this example, the animation named slide will start after a delay of 1 second and move the blue box 200px to the right.

You can also use the animation-delay property with multiple animations on the same element. Simply specify a delay for each animation as needed.

Now let's see another example with two animations:

Result:

In this example, the red circle will first rotate for 2 seconds with a delay of 1 second, and then change its color to yellow over 2 seconds with a delay of 2 seconds.