Ask any question about CSS here... and get an instant response.

How can I delay the start of a CSS animation by 2 seconds?

Asked on Oct 01, 2025

Answer

To delay the start of a CSS animation by 2 seconds, you can use the "animation-delay" property. This property specifies the amount of time to wait before starting the animation.

<!-- BEGIN COPY / PASTE -->
    <style>
      .animated-element {
        animation-name: exampleAnimation;
        animation-duration: 4s;
        animation-delay: 2s; /* Delays the start by 2 seconds */
      }

      @keyframes exampleAnimation {
        from { opacity: 0; }
        to { opacity: 1; }
      }
    </style>

    <div class="animated-element">
      This element will fade in after a 2-second delay.
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "animation-delay" property can be specified in seconds (s) or milliseconds (ms).
Multiple animations can have different delays by separating them with commas.
Ensure the "animation-name" and "animation-duration" properties are also defined for the animation to work.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I delay the start of a CSS animation by 2 seconds?

Asked on Oct 01, 2025

Answer

The Q&A Network