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
CSS Transition property
The CSS transition property allows you to create smooth animations when CSS properties change. It combines all four transition-related properties (transition-property, transition-duration, transition-timing-function, and transition-delay) into a single shorthand declaration.
Syntax
selector {
transition: property duration timing-function delay;
}
Possible Values
| Property | Description | Default |
|---|---|---|
property |
CSS property to animate (or 'all') | all |
duration |
Animation duration (s or ms) | 0s |
timing-function |
Speed curve (ease, linear, ease-in, etc.) | ease |
delay |
Delay before animation starts | 0s |
Example: Basic Height Transition
The following example creates a smooth height transition when hovering over a box −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
background: blue;
transition: height 3s;
margin: 20px 0;
}
.box:hover {
height: 250px;
}
</style>
</head>
<body>
<h3>Hover over the box below</h3>
<div class="box"></div>
</body>
</html>
A blue box appears that smoothly grows in height from 150px to 250px over 3 seconds when hovered over.
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, background-color 1s, border-radius 1.5s;
margin: 20px 0;
}
.multi-box:hover {
width: 200px;
background-color: green;
border-radius: 50px;
}
</style>
</head>
<body>
<h3>Multiple Property Animation</h3>
<div class="multi-box"></div>
</body>
</html>
A red square that transforms on hover: grows wider over 2 seconds, changes to green over 1 second, and becomes rounded over 1.5 seconds.
Example: Using 'all' Property
Use the all keyword to apply the same transition to all animatable properties −
<!DOCTYPE html>
<html>
<head>
<style>
.all-box {
width: 120px;
height: 120px;
background: orange;
transform: rotate(0deg);
transition: all 0.8s ease-in-out;
margin: 20px 0;
}
.all-box:hover {
background: purple;
transform: rotate(45deg) scale(1.2);
}
</style>
</head>
<body>
<h3>All Properties Transition</h3>
<div class="all-box"></div>
</body>
</html>
An orange box that smoothly rotates 45 degrees, scales up, and changes to purple when hovered over, all animated over 0.8 seconds.
Conclusion
The CSS transition property provides an easy way to create smooth animations between property changes. Use it to enhance user interactions and create polished, professional-looking effects on your web pages.
Updated on: 2026-03-15T12:38:38+05:30
226 Views
Advertisements