CSS animation-duration Property

The CSS animation-duration property is a powerful tool that controls the time it takes for an animation to complete a single cycle. This property is a key component in creating dynamic, engaging web designs.

The animation-duration property specifies the duration of one cycle of an animation. This duration can be defined in seconds or milliseconds. A value of 0, which is the default, means no animation will occur.

Syntax:

animation-duration: time|initial|inherit;

Property Value:

time: This value is used to specify the length of time for which an animation will complete one cycle. This can be specified in either in seconds or in milliseconds. The default value is 0, which means that no animation will occur.
initial: This value is used to set the property to its default value.
inherit: This value is used to inherit the property from its parent element.

Example: HTML program to illustrate the animation-duration property in CSS.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | animation-duration Property
    </title>
    <style>
        #gfg1 {
            animation-name: text;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        
        #geek1 {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
        }
        
        #geek2 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
        }
        
        @keyframes text {
            from {
                margin-top: 400px;
            }
            to {
                margin-top: 0px;
            }
        }
    </style>
</head>

<body>
    <!-- The below div is animated for a duration of 5s
    and will be played an infinite number of times -->
    <div id="gfg1">
        <div id="geek1">
            GeeksforGeeks
        </div>
        <div id="geek2">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Output:

Supported Browser: The browser supported by animation-duration property are listed below:

Google Chrome 43.0 and above
Edge 12.0 and above
Firefox 16.0 and above
Opera 30.0 and above
Safari 9.0 and above

Article Tags :

CSS

Web Technologies

CSS-Properties