CSS transition Property
The transition-property CSS property sets which CSS properties will have a transition effect, enabling smooth animations for specified properties when they change, without altering the layout or requiring JavaScript.
This property is a combination of four sub-properties
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like hover or: active or classes dynamically set by using JavaScript.
Syntax
selector {
transition: <transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>;
}
Note: If any of the values are not defined then the browser assumes the default values.
Property Values
| Property | Description |
|---|---|
| transition-property | Specifies the CSS properties to which a transition effect should be applied. |
| transition-duration | Specifies the length of time a transition animation should take to complete. |
| transition-timing-function | Specifies the speed curve of the transition effect. |
| transition-delay | Specifies the delay before the transition effect starts. |
Example 1: Background Color Transition
In this example we creates a blue box that transitions to green when hovered over, utilizing the CSS transition property to animate the color change over 0.5 seconds with an ease timing function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Transition Example </title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: green;
}
</style>
</head>
<body>
<h2>Css transition property</h2>
<div class="box"></div>
</body>
</html>
Output:
CSS transition Property Example Output
Example 2: Width and Height Transition
This example demonstrates the use of the transition property to change the width and height
<!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 </title>
<style>
.rectangle {
width: 100px;
height: 50px;
background-color: red;
transition: width 0.3s ease, height 0.3s ease;
}
.rectangle:hover {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<h2>CSS transition property</h2>
<div class="rectangle">
<p>Width and Height Transition</p>
</div>
</body>
</html>
Output:
CSS transition Property Example Output
Supported Browsers
The browser supported by transition property are listed below:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1
CSS transition Property – FAQs
What is the purpose of the transition property in CSS?
The transition property allows you to define smooth changes of CSS properties from one state to another over a specified duration.
Which CSS properties can be transitioned using the transition property?
Most animatable CSS properties, such as color, background-color, height, width, etc., can be transitioned using the transition property.
How do I specify multiple transitions on the same element?
You can specify multiple transitions by separating them with commas. For example: transition: color 2s, background-color 1s;
Is it possible to have different transition durations for different properties?
Yes, you can specify different durations for each property by defining them separately in the transition shorthand property.
What happens if a transition is defined on a property that is not animatable?
If a transition is set on a non-animatable property, the transition will not occur, and the property will change immediately without animation.
