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 work with CSS Transitions?
CSS transitions allow you to change property values smoothly over a specified duration, creating smooth animations between different states. This provides a better user experience by making changes appear gradual rather than instant.
Syntax
selector {
transition: property duration timing-function delay;
}
Transition Properties
| Property | Description | Default Value |
|---|---|---|
transition-property |
Specifies which CSS property to transition | all |
transition-duration |
Defines how long the transition takes | 0s |
transition-timing-function |
Specifies the speed curve of transition | ease |
transition-delay |
Defines when the transition will start | 0s |
Example: Basic Width Transition
The following example demonstrates a smooth width transition on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
background: #3498db;
transition: width 0.5s ease;
margin: 20px 0;
}
.box:hover {
width: 250px;
}
</style>
</head>
<body>
<h3>CSS Transition Example</h3>
<p>Hover over the box to see the smooth width transition:</p>
<div class="box"></div>
</body>
</html>
A blue rectangular box appears. When you hover over it, the width smoothly expands from 150px to 250px over 0.5 seconds, then smoothly returns to original size when hover ends.
Example: Multiple Property Transitions
You can transition multiple properties simultaneously −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-box {
width: 100px;
height: 100px;
background: #e74c3c;
border-radius: 5px;
transition: all 0.3s ease-in-out;
margin: 20px 0;
}
.multi-box:hover {
width: 150px;
height: 150px;
background: #2ecc71;
border-radius: 50%;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h3>Multiple Property Transition</h3>
<p>Hover to see size, color, shape, and rotation changes:</p>
<div class="multi-box"></div>
</body>
</html>
A red square appears. On hover, it smoothly transforms into a larger green circle while rotating 45 degrees, demonstrating simultaneous transitions of size, background color, border-radius, and rotation.
Timing Functions
| Value | Description |
|---|---|
ease |
Slow start, fast middle, slow end (default) |
linear |
Constant speed throughout |
ease-in |
Slow start, fast end |
ease-out |
Fast start, slow end |
ease-in-out |
Slow start and end |
Conclusion
CSS transitions provide an easy way to create smooth animations between different states of elements. Use the transition property to specify which properties to animate, duration, timing function, and delay for enhanced user interactions.
Updated on: 2026-03-15T12:37:17+05:30
117 Views
Advertisements