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
Performing multiple transitions using CSS3
The CSS3 transition property allows you to create smooth animations between different property values. When you need to animate multiple properties simultaneously, you can specify multiple transitions in a single declaration by separating each transition with commas.
Syntax
selector {
transition: property1 duration1, property2 duration2, property3 duration3;
}
Example 1: Width and Border-Radius Transition
This example demonstrates how to animate both width and border-radius properties simultaneously. When you hover over the element, it transforms from a rectangle to a circle while changing its width −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 50px;
}
.box {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.container:hover .box {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Hover to see multiple transitions</h2>
<div class="container">
<div class="box">Hover Me</div>
</div>
</body>
</html>
A blue rectangular box with red border appears. When hovered, it smoothly transitions to a smaller circle over 2 seconds, animating both width and border-radius properties simultaneously.
Example 2: Width, Height, and Background Color
This example shows how to transition three properties at once. The element changes its dimensions and background color when hovered −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 50px;
}
.box {
width: 300px;
height: 100px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 3s, height 3s, background-color 3s;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.container:hover .box {
width: 150px;
height: 150px;
background-color: orange;
}
</style>
</head>
<body>
<h2>Hover to see width, height, and color transition</h2>
<div class="container">
<div class="box">Transform Me</div>
</div>
</body>
</html>
A blue rectangular box appears. On hover, it smoothly transforms into a smaller orange square over 3 seconds, with width, height, and background-color all animating simultaneously.
Key Points
- Separate multiple transitions with commas in the transition property
- Each property can have its own duration and timing function
- All specified properties will animate simultaneously when triggered
- Use consistent durations for smooth, coordinated animations
Conclusion
Multiple CSS transitions allow you to create complex, smooth animations by animating several properties at once. This technique is essential for creating engaging user interfaces with coordinated visual effects.
2K+ Views
