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 CSS3 Transition Effects?
CSS3 transitions allow you to create smooth animations between different property values over a specified duration. The transition property enables gradual changes when elements change state, such as on hover, focus, or through JavaScript.
Syntax
selector {
transition: property duration timing-function delay;
}
Transition Properties
| Property | Description | Example Values |
|---|---|---|
transition-property |
Specifies which CSS property to animate |
width, height, all
|
transition-duration |
Defines how long the transition takes |
2s, 500ms, 0.3s
|
transition-timing-function |
Controls the speed curve |
ease, linear, ease-in-out
|
transition-delay |
Delays the start of transition |
0.5s, 200ms
|
Example: Width Transition on Hover
This example demonstrates a smooth width transition when hovering over an element −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s ease-in-out;
margin: 20px 0;
}
.container:hover div {
width: 100px;
}
</style>
</head>
<body>
<h1>Transition Effects Example</h1>
<div class="container">
<div></div>
</div>
<p>Hover over the blue box to see the width transition</p>
</body>
</html>
A blue rectangular box with red border appears. When you hover over it, the width smoothly transitions from 300px to 100px over 2 seconds with an ease-in-out timing function.
Example: Multiple Property Transitions
You can animate multiple properties simultaneously using the all keyword or by specifying multiple properties −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-transition {
width: 200px;
height: 200px;
background: #ff6b6b;
border-radius: 10px;
transition: all 0.5s ease;
margin: 20px;
cursor: pointer;
}
.multi-transition:hover {
width: 250px;
height: 250px;
background: #4ecdc4;
border-radius: 50%;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Multiple Property Transition</h1>
<div class="multi-transition"></div>
<p>Hover to see width, height, color, border-radius, and rotation change</p>
</body>
</html>
A red-pink square box with rounded corners appears. On hover, it smoothly transitions to a larger teal circle while rotating 45 degrees, all happening over 0.5 seconds.
Conclusion
CSS3 transitions provide an easy way to create smooth animations between different states of elements. Use the transition property to control which properties animate, how long they take, and their timing behavior for enhanced user experiences.
Updated on: 2026-03-15T15:08:09+05:30
131 Views
Advertisements