Animation delay property (animation-delay)

The automation-delay property specifies the delay of the animation. The delay is configured in seconds (s) or milliseconds (ms).

Syntax:

selector {

animation-delay: time | initial | inherit;

}

Values:

The values that are allowed for the animation-delay property are:

time; This value is optional (default value is 0) and it specifies the number of seconds or milliseconds to wait for automation to start.
initial, inherit

If you specify a negative value, the animation starts immediately, but at the point it would have reached at the specified offset, for instance if the animation is four seconds long, and animation-delay is set to minus two seconds, it begins halfway through, or it would start at +2 seconds.

Example

The example with automation-delay property set to negative value:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative; top:10px;
    width: 10px; height: 180px;
    background-color:black;
    animation: animation 3s infinite;
    animation-delay: 3s;
        /* ADD proprietary selectors if needed */
}
@keyframes animation {
    0% { width:10px; }
    50% { width:90%; }
    }
}
</style>
</head>
  
<body>

<h3>Animation starts delayed for 3 seconds:</h3>

<div></div>

</body>
</html>

›› go to examples ››

Animation delay property (animation-delay)

Syntax:

Values:

Example

The example with automation-delay property set to negative value:

Comments

About

Contact

Get Connected