CSS - animation-duration Property

Quiz

CSS animation-duration property defines how long an animation takes to complete a single cycle.

Syntax

animation-delay: time | initial | inherit;

Property Values

Value	Description
time	Specified in seconds(s) or milliseconds(s). This specifies the length that an animation needs to complete a cycle.
initial	This sets the property to its initial value
inherit	This inherits the property from the parent element

Examples of CSS animation-duration Property

Below listed examples will illustrate the animation duration property with different values.

Setting Animation Duration

The following examples demonstrates how to create a simple animation with a specified duration using the animation-duration property.

Animation Duration with 0s

When the duration of the animation-duration property is set to 0s, no animation occurs. In the following example, the considered red box remains stationary as the duration is set to 0s

Example

 
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: move;
            animation-duration: 0s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 400px;
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Duration Property</h2>
    <div class="box"></div>
</body>

</html>

Positive Animation Duration

When the duration of the animation-duration property is set to a positive value, the animation takes that much time to complete one cycle. In the considerd example, the red box takes 5s to complete one cycle.

Example

 
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: move;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 400px;
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Duration Property</h2>
    <div class="box"></div>
</body>

</html>

Supported Browsers

Property
animation-duration	43.0	10.0	16.0	9.0	30.0

Print Page