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
How to create multiple transitions on an element using CSS?
Creating multiple transitions on an element using CSS allows you to animate several properties simultaneously, creating dynamic and engaging user interactions. By combining various transitions with different durations, delays, and timing functions, you can create sophisticated animation effects.
Syntax
selector {
transition: property1 duration timing-function delay,
property2 duration timing-function delay;
}
Transition Properties
| Property | Description |
|---|---|
transition-property |
Specifies which CSS properties should be transitioned |
transition-duration |
Sets the duration of the transition in seconds or milliseconds |
transition-timing-function |
Controls the speed and timing curve of the transition |
transition-delay |
Specifies a delay before the transition starts |
Example 1: Multiple Properties with Different Durations
This example demonstrates a button that transitions width and background-color with different durations to create a staggered effect
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 50px;
}
.btn {
width: 120px;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: width 0.3s ease-in, background-color 0.8s ease-out;
}
.btn:hover {
width: 180px;
background-color: #f44336;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
A green button appears that expands its width quickly (0.3s) while the background color changes to red more slowly (0.8s) when hovered, creating a staggered animation effect.
Example 2: Using Transition Delays
This example shows how to use delays to create sequential animations
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
.circle {
width: 150px;
height: 150px;
background-color: #3498db;
border-radius: 50%;
margin: 0 auto;
cursor: pointer;
transition: background-color 0.4s ease-in-out,
border-radius 0.6s ease-in-out 0.3s,
transform 0.5s ease-in-out 0.1s;
}
.circle:hover {
background-color: #e74c3c;
border-radius: 10px;
transform: scale(1.2);
}
</style>
</head>
<body>
<p>Hover over the circle to see sequential transitions</p>
<div class="circle"></div>
</body>
</html>
A blue circle that, when hovered, changes color immediately, scales up after 0.1s, and transforms from circle to rounded square after 0.3s, creating a sequential animation effect.
Example 3: Different Timing Functions
This example demonstrates using different timing functions for each property transition
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
.animated-box {
width: 200px;
height: 100px;
background-color: #9b59b6;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
cursor: pointer;
transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
background-color 0.3s linear,
color 0.4s ease-in-out;
}
.animated-box:hover {
width: 300px;
background-color: #f39c12;
color: #2c3e50;
}
</style>
</head>
<body>
<div class="animated-box">Hover Me</div>
</body>
</html>
A purple box that expands with a bouncy cubic-bezier animation, while the background color changes linearly and text color transitions smoothly, each with different timing characteristics.
Conclusion
Multiple CSS transitions allow you to create complex, layered animations by combining different properties with varying durations, delays, and timing functions. This technique enables rich, interactive user experiences that enhance the visual appeal of web interfaces.
1K+ Views
