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

How can I delay the start of a CSS animation using keyframes?

Asked on Sep 28, 2025

Answer

To delay the start of a CSS animation, you can use the "animation-delay" property. This property allows you to specify a delay before the animation starts.

<!-- BEGIN COPY / PASTE -->
    <style>
      .animated-box {
        width: 100px;
        height: 100px;
        background-color: blue;
        animation-name: slide;
        animation-duration: 2s;
        animation-delay: 1s; /* Delay the start by 1 second */
      }

      @keyframes slide {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(100px);
        }
      }
    </style>

    <div class="animated-box"></div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "animation-delay" property accepts time values in seconds (s) or milliseconds (ms).
You can use negative values for "animation-delay" to start the animation partway through.
Multiple animations can have different delays by separating values with commas.
Ensure the "animation-name" and "animation-duration" are set for the delay to take effect.

✅ 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 using keyframes?

Asked on Sep 28, 2025

Answer

The Q&A Network