CSS animation-delay

The CSS animation-delay property is used to delay the animation. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 3s; animation-iteration-count: infinite;
         animation-delay: 5s; }
      @keyframes fresherearth {
         from {left: 0px; background-color: chocolate;}
         to {left: 200px; background-color: blue;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>

Output

The animation will start after 5 second. The s in animation-delay: 5s, refers to second.

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The animation-iteration-count is used to define the total number of iterations or cycles for an animation to play.

Note - The @keyframes is used to define the change in styles for multiple times in one cycle of selected animation.

CSS animation-delay Syntax

The syntax of animation-delay property in CSS, is:

animation-delay: x;

The value of x should be any of the following:

time - used to define time to delay the animation. The default value is 0
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - We can use either s (seconds) or ms (milliseconds) to define animation-delay property in CSS.

Note - The negative values are also allowed to define animation-delay property. For example, if -2s is given to animation-delay, and 6s is given to animation-duration, then the animation starts from the position, where the animation will be after 2 seconds of start. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: myanim; animation-duration: 6s; animation-iteration-count: infinite;
         animation-delay: -2s; }
      @keyframes myanim {
         from {left: 0px; background-color: chocolate;}
         to {left: 200px; background-color: blue;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>

Output

Note - The negative value is used, when we need to start the animation before load. And the positive value is used to delay the animation after the load.

CSS Online Test

« Previous Tutorial Next Tutorial »