CSS transitions enable web developers to control the smooth transition between two states of an element. For instance, when a user hovers over a button, the background color of the element can change seamlessly using CSS selectors and pseudo-classes.
Transitions are not limited to color changes; they can animate various properties, enhancing user experience and interactivity by making changes visually appealing. This article demonstrates how to animate transitions between CSS properties using four key transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay.
Key CSS Transition Properties
To create effective transitions, you should use at least two of the four key properties: transition-property and transition-duration. Here’s a detailed look at each property:
1. transition-property:
This property allows you to select the CSS properties that you want to animate during the transition(change).
Syntax:
transition-property: none | all | property | property1,
property2, ..., propertyN;
- Values:
- none is used to specify that no property should be selected.
- all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.
- We can specify a single property or a set of comma-separated properties property1, property2, …, propertyN.
2. transition-duration:
This property allows you to determine how long it will take to complete the transition from one CSS property to the other.
Syntax:
transition-duration: time;
- Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).
3. transition-timing-function:
This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.
Syntax:
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;
- Note, there are other values that this transition-timing-function can take, only the most frequent and simple are mentioned here.
4. transition-delay:
This property allows you to determine the amount of time to wait before the transition actually starts to take place.
Syntax:
transition-delay: time;
- Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).
Shorthand Property
You can combine all four transition properties into a single shorthand property, which simplifies the code and ensures readability.
Syntax:
transition: (property name) | (duration) | (timing function) | (delay);
The value is taken by are same as mentioned above. This property must be placed with other CSS properties, if any, of the initial state. You should use at least, property name and duration to get any animate-able effect. Also, the ordering of the values matters. The first value is of the property name, second for the duration and so on, as listed above. So, if only one number is mentioned, it will be taken up as duration, and not as a delay.
Example: Changing property without using transitions.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>
<style>
h1 {
color: green;
text-align: center;
}
div.one {
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
}
div.one:hover {
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="one">
</div>
</body>
</html>
Output: 
Practical Examples
Example: Changing property using transitions.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>
<style>
h1 {
color: green;
text-align: center;
}
div.one {
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
transition: height 2s, width 2s, background 2s;
}
div.one:hover {
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="one">
</div>
</body>
</html>
Output: 
CSS transitions are a powerful tool for creating smooth and visually appealing transitions between different states of an element. By understanding and utilizing the four key properties—transition-property, transition-duration, transition-timing-function, and transition-delay—developers can enhance user interactivity and experience. The shorthand property simplifies the process, making it easier to manage and apply transitions. Experiment with the provided examples to see the impact of transitions on your web design projects and elevate the overall user experience
Supported browsers:
The browsers supported by Transition are listed below:
- Google Chrome 26
- Firefox 16
- Opera 12.1
- Safari 9
- Edge 12
CSS Transitions – FAQs
What are CSS transitions?
CSS transitions allow you to change property values smoothly (over a given duration) when a specified event (such as hovering over an element) occurs.
How do I create a basic CSS transition?
To create a basic CSS transition, you specify the CSS property you want to animate, the duration of the transition, and optionally the timing function and delay.
What properties can be transitioned using CSS transitions?
Most CSS properties that have numeric values or colors can be transitioned. Examples include width, height, margin, padding, background-color, opacity, and transform.
How do I make a transition run infinitely?
Transitions cannot run infinitely by themselves, but you can use the animation property for continuous animations.
What are some common uses of CSS transitions?
- Creating hover effects on buttons and links
- Smoothly changing the size or position of elements
- Fading in or out elements
- Creating accordion or toggle effects
- Enhancing user interactions with visual feedback
