CSS animation-duration Property

Last Updated : 23 Aug, 2024

The animation-duration property in CSS is essential for controlling the length of time an animation takes to complete one cycle, making it a vital tool for creating dynamic and engaging web designs.

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 lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS | animation-duration Property</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #gfg1 {
            animation: text 5s infinite;
            text-align: center;
        }

        #geek1 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #009688;
            margin-bottom: 0.5rem;
            padding: 10px;
            background-color: #e0f2f1;
            border-radius: 8px;
        }

        #geek2 {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }

        @keyframes text {
            from {
                transform: translateY(100px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="gfg1">
        <div id="geek1">
            GeeksforGeeks
        </div>
        <div id="geek2">
            A computer science portal for geeks
        </div>
    </div>
</body>
  
</html>

Output:

Best Practices for Using Animation-Duration:

Keep Animations Subtle: Avoid overly long animations that can distract users.
Performance Considerations: Test animations on different devices to ensure smooth performance.
User Experience: Use animations to enhance user experience without overwhelming the interface.

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

CSS animation-timing-function Property

vt_m

Improve

Article Tags :

CSS animation-duration Property

Syntax:

Property Value:

Best Practices for Using Animation-Duration:

Similar Reads

Thank You!

What kind of Experience do you want to share?