0
0
CSSmarkup~5 mins

Animation duration and delay in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Animation duration and delay control how long an animation takes and when it starts. This helps make web pages feel smooth and lively.

You want a button to slowly change color when hovered.
You want an image to fade in after the page loads.
You want text to slide in after a short pause.
You want to control the timing of multiple animations on a page.
Syntax
CSS
animation-duration: <time>;
animation-delay: <time>;

animation-duration sets how long the animation runs.

animation-delay sets how long to wait before starting the animation.

Examples
This makes the animation last 2 seconds.
CSS
animation-duration: 2s;
This waits 1 second before the animation starts.
CSS
animation-delay: 1s;
Animation lasts half a second and starts after 0.2 seconds.
CSS
animation-duration: 500ms;
animation-delay: 200ms;
Sample Program

This example shows a square box that waits 1 second, then slides to the right over 3 seconds.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Animation Duration and Delay Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: coral;
      margin: 2rem auto;
      animation-name: slideRight;
      animation-duration: 3s;
      animation-delay: 1s;
      animation-fill-mode: forwards;
    }

    @keyframes slideRight {
      from { transform: translateX(0); }
      to { transform: translateX(200px); }
    }
  </style>
</head>
<body>
  <div class="box" aria-label="Animated box sliding right"></div>
</body>
</html>
OutputSuccess
Important Notes

You can use seconds (s) or milliseconds (ms) for time values.

Use animation-fill-mode: forwards; to keep the animation's end state visible.

Delays help you create nice effects by starting animations at different times.

Summary

animation-duration controls how long an animation runs.

animation-delay controls when the animation starts.

Using both lets you create smooth, timed animations on your web page.