Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Performing multiple transitions using CSS3
For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let's say we changed the width and border-radius for the transition.
transition: width 2s, border-radius 2s;
Set the container div
To begin with, set a parent div −
<div class="container"> <div></div> </div>
Set the transition
The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds −
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
On hover
On hovering the mouse cursor, since we have set two transitions above, the shape will change −
.container:hover div {
width: 100px;
border-radius: 50%;
}
Set multiple transitions with width and border-radius
The following is the code for performing multiple transitions using CSS3 −
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width and to change it into circle
</h2>
</body>
</html>
Set multiple transitions with width and height
Let us see another example for multiple transitions. The transition is set using the transition property for the width, height and background-color properties. The duration set is 2 seconds −
transition: width 3s, height, 3s, background-color 3s;
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 3s, height, 3s, background-color 3s;
}
.container:hover div {
width: 150px;
height: 150px;
background-color: orange;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width, height and background color
</h2>
</body>
</html>
2K+ Views
