Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the name of the CSS property the transition effect is for
The CSS transition-property property specifies which CSS property should have a transition effect applied to it. This property determines which property changes will be animated when the element's state changes.
Syntax
selector {
transition-property: property-name;
}
Possible Values
| Value | Description |
|---|---|
none |
No transition effect will be applied |
all |
All properties that can be animated will have transition effects (default) |
property-name |
Specific CSS property name like width, height, background-color, etc. |
initial |
Sets the property to its default value |
inherit |
Inherits the value from parent element |
Example: Width Transition
The following example demonstrates a transition effect applied only to the width property −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
background-color: #3498db;
transition-property: width;
transition-duration: 3s;
margin: 20px 0;
}
.box:hover {
width: 250px;
}
</style>
</head>
<body>
<h2>Width Transition Example</h2>
<p>Hover over the box below to see the width transition effect.</p>
<div class="box"></div>
</body>
</html>
A blue box appears on the page. When you hover over it, the width smoothly transitions from 150px to 250px over 3 seconds. Only the width property is animated.
Example: Multiple Properties
You can specify multiple properties by separating them with commas −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition-property: width, height, background-color;
transition-duration: 2s;
margin: 20px 0;
}
.multi-box:hover {
width: 200px;
height: 200px;
background-color: #2ecc71;
}
</style>
</head>
<body>
<h2>Multiple Properties Transition</h2>
<p>Hover over the box to see multiple properties transition.</p>
<div class="multi-box"></div>
</body>
</html>
A red square appears on the page. When you hover over it, the width and height grow to 200px while the background color changes from red to green, all transitioning smoothly over 2 seconds.
Conclusion
The transition-property property gives you precise control over which CSS properties should be animated during state changes. Use specific property names for targeted effects or all for comprehensive transitions.
Updated on: 2026-03-15T12:39:19+05:30
159 Views
Advertisements