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
How to create a transition effect with CSS?
CSS transitions allow you to smoothly animate changes in CSS properties over a specified duration. They create smooth visual effects when elements change state, such as on hover or focus.
Syntax
selector {
transition: property duration timing-function delay;
}
Possible Values
| Property | Description |
|---|---|
property |
CSS property to animate (width, height, color, etc.) |
duration |
Time the transition takes (in seconds or milliseconds) |
timing-function |
Speed curve (ease, linear, ease-in-out, etc.) |
delay |
Delay before transition starts (optional) |
Example: Width Transition on Hover
The following example creates a smooth width transition when hovering over a box −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
background: blue;
transition: width 3s;
margin: 20px 0;
}
.box:hover {
width: 250px;
}
</style>
</head>
<body>
<h3>Hover over the box below</h3>
<div class="box"></div>
</body>
</html>
A blue square box appears. When you hover over it, the box smoothly expands its width from 150px to 250px over 3 seconds.
Example: Multiple Property Transitions
You can animate multiple properties simultaneously by separating them with commas −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-box {
width: 100px;
height: 100px;
background: red;
border-radius: 0;
transition: width 2s, height 2s, background-color 2s, border-radius 2s;
margin: 20px 0;
}
.multi-box:hover {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<h3>Hover for multiple transitions</h3>
<div class="multi-box"></div>
</body>
</html>
A small red square appears. When hovered, it smoothly transforms into a larger green circle over 2 seconds, changing size, color, and border-radius simultaneously.
Conclusion
CSS transitions provide an easy way to create smooth animations between property changes. Use the transition property to specify which properties to animate and their duration for enhanced user experience.
Updated on: 2026-03-15T12:37:49+05:30
175 Views
Advertisements