Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies'; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd(ad_id); });
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>
Updated on: 26-Dec-2023
1K+ Views
Related Articles
- How to create multiple transitions on an element using CSS?
- Performing distinct on multiple fields in MongoDB?
- Performing Database Transactions using Python
- What are CSS Transitions?
- School-to-Work Transitions
- Setting Column Gap using CSS3
- Performing Google Search using Python code?
- Performing Null check using HANA SQL Script
- Adjusting the Image Contrast using CSS3
- Applying Opacity to Images using CSS3
- Fading Text Animation Effect Using CSS3
- Reordering Individual Flex Items using CSS3
- Setting the Image Brightness using CSS3
- Specify Word Breaking Rules using CSS3
- Text in Transparent Box using CSS3
Advertisem*nts
';adpushup.triggerAd(ad_id); });
