CSS - animation-delay Property

Quiz

CSS animation-delay property determines the time taken to start an animation.It is specified in seconds or milliseconds.

A positive value introduces a time delay, while a negative value starts the animation much earlier appearing playing for the mentioned duration.Zero indicates no delay and the animation starts right away.

Syntax

animation-delay: time | initial | inherit;

Property Values

Value	Description
time	Specified in seconds(s) or milliseconds(s). Both positive and negative values can be used. Positive values introduce time delays. Negative values make the animation appear playing for mentioned time. Zero indicates an immediate play and is the default value. This is an optional field.
initial	This sets the property to its initial value
inherit	This inherits the property from the parent element

Examples of CSS animation-delay Property

Below listed examples will illustrate the animation-delay Property

Setting no Delay for an Animation

In this example a box without delay is consider. The box moves in the forward direction without any delay.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 3s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box">
        Animation without Delay
    </div><br>

</html>

Setting Positive Time Delay for an Animation

In this example we consider a box with positive time delay. The box starts to move forward after a duration of 2s as the delay imposed is of 2s

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 2s;
        }

        .animated-box-delayed {
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Postitive Delay
    </div><br>

</html>

Setting Negative Time Delay for an Animation

In this example we consider a box with negative time delay. The box appears to have been moving for a duration of 1s as specified.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 4s;
        }

        .animated-box-delayed {
            animation-delay: -1s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Negative Delay
    </div><br>

</html>

Supported Browsers

Property
animation-delay	43.0	10.0	16.0	9.0	30.0

Print Page