How to use animation-delay in CSS ?

Last Updated : 12 May, 2021

In this article, we will see how to use the animation-delay property in CSS. The animation-delay property is used to set the animations on the web pages.

The animation-delay property tells us about the delay in the start of an animation.
The animation-delay value is defined in milliseconds (ms) or seconds (s).
Its default value is 0 seconds.
The property is very useful in making the webpages attractive

CSS Syntax:

animation-delay: time |initial |inherit;

Property Values:

time: This value is optional. It is used to define the number of seconds (s) or milliseconds (ms) to wait before the animation will start, that is the amount of time for which the animation will be delayed. The default value is 0. Negative values are allowed. If a negative value is used, the animation will start as if it had already been playing for N seconds/milliseconds.
initial: This value is used to set the property to its default value.
inherit: This value is used to inherit the property from its parent element.

Below examples illustrates the use of animation-delay property in CSS.

Example 1: In this example, we use animation property to add the animation effect and also use animation-delay property to add the time delay in animation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            color: green; 
            position: relative; 
            animation: lit 2s; 
            animation-delay: 2s; 
        } 
  
        @keyframes lit { 
            from { 
                left: 0px; 
            } 
  
            to { 
                left: 200px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h3> 
        How to use animation-delay in CSS? 
    </h3> 
  
    <p>Animation will start after 2 sec.</p> 
  
    <h1>GeeksforGeeks</h1> 
</body> 
  
</html> 

Output:

Example 2: In this example, we use the animation-name property to add the animation effect and also use the animation-delay property to add the time delay in animation. We have also used the animation-iteration-count property to add the animation iteration.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .separation { 
            color: white; 
            animation-name: separation; 
            animation-duration: 2s; 
            animation-timing-function:  
                cubic-bezier(0.25, 0.1, 0.25, 3.0); 
            animation-delay: 2s; 
            animation-iteration-count: 1; 
            animation-direction: normal; 
            animation-fill-mode: forwards; 
        } 
  
        @keyframes separation { 
            0% { 
                letter-spacing: 1.2em; 
                color: orange; 
            } 
  
            100% { 
                letter-spacing: 0.1em; 
                color: green; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h3> 
        How to use animation-delay in CSS? 
    </h3> 
  
    <p>Animation will start after 2 sec.</p> 
  
    <h1 class="separation">Geeks For Geeks</h1> 
</body> 
  
</html> 