How to create CSS3 Transition Effects?
https://www.tutorialspoint.com/how-to-create-css3-transition-effects
-
13-09-2020 - |
Domanda
How to create CSS3 Transition Effects?
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 −
Advertisements
Non affiliato a Tutorialspoint