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.
Following is the code for performing multiple transitions using CSS3 −
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>
Output
The above code will produce the following output −