CSS - animation-delay



The CSS property animation-delay determines the duration between the application of an animation to an element and the start of the animation.

This delay makes it possible to start the animation either after a certain period of time, from the beginning or immediately and at a certain point during the animation.

The shorthand property animation is a convenient way to set all animation properties at the same time.

Possible Value

The CSS property animation-delay can have the following value:

<time> - This refers to the time delay in seconds or milliseconds before an animation applied to an element, starting from the moment of application. The unit of measurement is required for the specification.

  • A positive value means a delay before the animation starts, while a default value of 0s means that the animation starts immediately after application.

  • A negative value triggers an immediate start of the animation, which begins after part of its cycle.

    For example, specifying -1s means that the animation begins instantly but initiates 1 second into the sequence. If the delay is negative and the starting point is implicit, it is determined from the moment the animation is applied.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Note: The CSS scroll-driven animations do not get affected by the value of animation-delay.

Syntax

animation-delay = <time>#  

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-delay - Basic Example

  • The animation-delay property is used in the following example to demonstrate the delay in animation of the element.

  • Since it has no set delay, the first animated box begins its sliding animation right away.

  • On the other hand, the second animated box, which is identified by the class .animated-box-delayed, delays the start of its sliding animation by two seconds.

<html>   
<head>
<style>
   @keyframes slideIn {
      from {
      transform: translateX(-100%);
      }
      to {
      transform: translateX(0);
      }
   }
   .animated-box {
      width: 300px;
      height: 150px;
      background-color: #edb753;
      color: #fff;
      margin-left: 30px;
      text-align: center;
      line-height: 150px;
      font-size: 20px;
      font-family: Arial, sans-serif;
      animation: slideIn 2s ease-in-out;
   }
  .animated-box-delayed {
      animation-delay: 2s; 
   }
</style>
</head>
<body>
<div class="animated-box">Animation without Delay</div><br/>
<div class="animated-box animated-box-delayed">Animation with 2s Delay</div>
</body>
</html>
Advertisements