animation-delay

Definition

The animation-delay property is a CSS property that specifies the amount of time that should elapse before an animation starts. It is used in conjunction with the animation-name, animation-duration, and other animation properties to create a single animation effect.

Examples

/* start the animation after 1 second */
.element {
  animation-delay: 1s;
}

/* start the animation after 500 milliseconds */
.element {
  animation-delay: 500ms;
}

/* start the animation after 5 seconds */
.element {
  animation-delay: 5s;
}

/* start the animation after 2 minutes */
.element {
  animation-delay: 2m;
}

/* start the animation after 1 hour */
.element {
  animation-delay: 1h;
}

Here is an example of how you might use the animation-delay property with other animation properties:

.element {
  animation-name: fadein;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-iteration-count: 1;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

Values

The animation-delay property takes a time value as its value, which can be specified in seconds (s), milliseconds (ms), minutes (m), or hours (h).

Best Practices

1. Use the animation-delay property to create complex animation sequences: The animation-delay property is useful for creating complex animation sequences by specifying a delay before an animation starts. This can be used to create animations that occur one after the other, or to create more complex interactions between elements.
2. Specify a time value in seconds (s) or milliseconds (ms): The animation-delay property takes a time value as its value, which can be specified in seconds (s) or milliseconds (ms). It's generally best to use seconds (s) for longer delays and milliseconds (ms) for shorter delays.
3. Use the animation-delay property in conjunction with other animation properties: The animation-delay property works in conjunction with other animation properties, such as animation-name and animation-duration, to create a single animation effect. Be sure to use the animation-delay property in combination with these other properties to create the desired animation effect.

Browser Compatibility