CSS transition-property Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The transition-property property in CSS is used to specify the CSS properties to which a transition effect should be applied when their values change. This allows for smooth animations and transitions, enhancing the user experience by providing visual feedback during interactions such as hovering, focusing, or clicking elements.

💡 Syntax

The syntax for the transition-property property is as follows:

Syntax

Copied

element {
  transition-property: property;
}

Here, property can be a specific CSS property name, all, or none.

🎛️ Default Value

The default value of the transition-property is all, which means that the transition effect will apply to all the properties that change.

🏠 Property Values

Value	Description
none	No properties will transition.
all	All properties will transition.
property name	Specifies one or more comma-separated CSS property names to apply the transition effect to, such as width, height, background-color, etc.

📄 Example

In this example, we'll create a transition effect for the width and background-color properties of a div element.

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-property Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition-property: width, background-color;
      transition-duration: 2s;
    }
    .box:hover {
      width: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Transition Property Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The transition-property property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The transition-property property is a powerful feature in CSS that allows developers to create smooth transitions and animations.

By specifying which properties should transition when their values change, you can enhance the interactivity and visual appeal of your website. Experiment with different properties and transition effects to see how they can improve the user experience of your web projects.