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
What are CSS Transitions?
CSS transitions allow you to smoothly animate changes to CSS properties over a specified duration. Instead of property changes happening instantly, transitions create a gradual change effect that enhances user experience.
Syntax
selector {
transition: property duration timing-function delay;
}
Transition Properties
| Property | Description | Example Value |
|---|---|---|
transition-property |
Specifies which CSS property to animate |
width, height, all
|
transition-duration |
Sets how long the transition takes |
2s, 500ms
|
transition-timing-function |
Controls the speed curve |
ease, linear
|
transition-delay |
Delays the start of transition |
1s, 200ms
|
Example: Height Transition
The following example demonstrates a smooth height transition when hovering over an element −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition: height 3s ease;
margin: 20px;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h2>CSS Height Transition</h2>
<p>Hover over the blue box to see the height change smoothly.</p>
<div></div>
</body>
</html>
A blue square box appears. When hovered, it smoothly grows taller from 150px to 200px over 3 seconds, creating a smooth animation effect.
Example: Multiple Property Transitions
You can animate multiple properties simultaneously using the all keyword −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-transition {
width: 100px;
height: 100px;
background: red;
border-radius: 0;
transition: all 2s ease-in-out;
margin: 20px;
}
.multi-transition:hover {
width: 200px;
height: 200px;
background: green;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Multiple Property Transition</h2>
<p>Hover to see size, color, and shape changes.</p>
<div class="multi-transition"></div>
</body>
</html>
A small red square appears. On hover, it smoothly transforms into a larger green circle over 2 seconds, changing size, color, and border-radius simultaneously.
Conclusion
CSS transitions provide an elegant way to animate property changes, making interfaces more interactive and visually appealing. Use the transition property to specify which properties to animate and control the timing for smooth effects.
Updated on: 2026-03-15T12:36:59+05:30
200 Views
Advertisements