VOOZH about

URL: https://www.geeksforgeeks.org/css/css-animation-delay-property/

⇱ CSS animation-delay Property - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

CSS animation-delay Property

Last Updated : 12 Jun, 2026

The CSS animation-delay property specifies the amount of time to wait before an animation starts. It allows you to delay the beginning of an animation after it is applied to an element.

  • Controls when an animation starts.
  • Accepts time values in seconds (s) or milliseconds (ms).
  • A positive value delays the animation, while 0s starts it immediately.

Syntax:

animation-delay: time | initial | inherit;

Property Values

  • time: Specifies the delay before the animation starts in seconds (s) or milliseconds (ms). Negative values are allowed and start the animation as if it has already been running for that duration.
  • initial: Sets the property to its default value (0s).
  • inherit: Inherits the animation-delay value from the parent element.

Example: Demonstrates the animation-delay property, where the second <h2> animation starts 10 seconds after the page loads.

Output:

👁 Animation-delay-4
CSS animation-delay Property Example Output
Comment
Article Tags: