CSS transition-duration Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 33 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The transition-duration property in CSS is used to define the length of time that a transition animation takes to complete. It is part of the CSS Transitions module and allows you to control how long an element should take to change from one style to another.

This property can be particularly useful for creating smooth, visually appealing transitions for various user interactions.

💡 Syntax

The syntax for the transition-duration property is simple. You specify the duration of the transition in seconds (s) or milliseconds (ms).

Syntax

Copied

element {
  transition-duration: time;
}

Here, time represents the duration of the transition.

🎛️ Default Value

The default value of the transition-duration property is 0s, meaning no transition effect.

🏠 Property Values

Value	Description
time	A positive time value specified in seconds (e.g., 2s) or milliseconds (e.g., 200ms). Negative values are not allowed.

📄 Example

In this example, we'll apply a transition duration to a div element that changes its background color on hover.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS transition-duration Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition-duration: 2s;
    }

    .box:hover {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Transition Duration Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The transition-duration property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is advisable to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The transition-duration property is an essential tool for web developers looking to create smooth, gradual transitions between different states of an element.

By specifying the duration of these transitions, you can enhance the user experience and add a touch of elegance to your web projects. Experiment with different durations to see how this property can improve the visual dynamics of your website.