| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The ‘transition-property‘ property in CSS is used to specify the CSS property (or properties) to which a transition effect should be applied when they change. This property is part of the CSS Transitions module, which allows you to define smooth transitions between different states of an element.
Syntax
transition-property: none | all | [property1, property2, ...];
Values
- ‘
none‘: No property will transition. - ‘
all‘: All properties that can be transitioned will be. - ‘
[property1,' 'property2, ...]‘: A comma-separated list of CSS property names that will transition.
Examples
1. Basic Usage
.box {
width: 100px;
height: 100px;
background-color: blue;
transition-property: background-color;
transition-duration: 2s;
}
.box:hover {
background-color: red;
}
In this example, when you hover over the ‘.box‘ element, only the ‘background-color‘ property will transition over 2 seconds from blue to red.
2. Transitioning Multiple Properties
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(0deg);
transition-property: background-color, transform;
transition-duration: 2s;
}
.box:hover {
background-color: red;
transform: rotate(45deg);
}
Here, both the ‘background-color‘ and ‘transform‘ properties will transition over 2 seconds when the ‘.box‘ element is hovered over.
3. Using all to Transition All Properties
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(0deg);
transition-property: all;
transition-duration: 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
transform: rotate(45deg);
}
With ‘transition-property: all‘, any change to any property will be transitioned over 2 seconds when the .box element is hovered over.
4. No Transition (none)
.box {
width: 100px;
height: 100px;
background-color: blue;
transition-property: none;
transition-duration: 2s;
}
.box:hover {
background-color: red;
}
In this example, even though a transition duration is set, no transition effect will occur because transition-property is set to none.
Practical Example
Here’s a more complex example where different properties have different transition durations:
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: scale(1);
opacity: 1;
transition-property: background-color, transform, opacity;
transition-duration: 2s, 1s, 0.5s;
}
.box:hover {
background-color: red;
transform: scale(1.5);
opacity: 0.5;
}
background-colorwill transition over 2 seconds.transformwill transition over 1 second.opacitywill transition over 0.5 seconds.
Notes
- If
transition-propertyis omitted, the default value isall. - The properties that can be transitioned are usually those that have numeric values, such as
width,height,margin,padding,color,background-color,opacity,transform, etc. - Not all properties can be transitioned. For example, properties related to layout, such as
display, cannot be transitioned.
Using transition-property effectively can create smooth and visually appealing effects that enhance the user experience on a webpage.
