To create CSS3 Transition Effects, use the transition property. Following is the code for creating transition effects using CSS3 −
Example
<!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; background: rgb(25, 0, 255); border: 2px solid red; transition: width 2s; } .container:hover div { width: 100px; } </style> </head> <body> <h1>Transition effects example</h1> <div class="container"> <div></div> </div> <h2>Hover over the above div to reduce its width</h2> </body> </html>
Output
The above code will produce the following output −
On hovering above the div −