24 Nov CSS – Transitions
If you want to change the property values on a web page, use the Transitions in CSS. Through this, easily change the element from one style to another. To set a transition effect, set the property for which you want to add an effect and the duration of the effect using the transition property, for example, transition for height:
|
1 2 3 4 |
height: 100px; transition: height 3s; |
Let us see some examples:
- Set the transition for a property
- Set the transition for multiple properties
- Delay the Transition
Set the transition for a property
Let us now see the complete example to set the transition effect and change the height of a div on hover. We will set the transition for a single property height using the transition:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: red; border: 2px solid black; transition: height 5s; } div:hover { height: 250px; } </style> </head> <body> <h1>CSS Transition</h1> <p>Hover over the below div and set the transition:</p> <div></div> </body> </html> |
Output
Now, hover over the box and the height will increase:
Set the transition for multiple properties
In this example, we will set the transition for more than one property i.e. height and width here using the transition property:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: red; border: 2px solid black; transition: width 3s, height 5s; } div:hover { height: 250px; width: 250px; } </style> </head> <body> <h1>CSS Transition</h1> <p>Hover over the below div and set the transition:</p> <div></div> </body> </html> |
Output
Now, hover over the box. The height, as well as width, will increase i.e. transition:
Delay the Transition
We can easily delay the transition using the transition-delay property. Let us see an example. Here, we will set the delay to 3 seconds:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background: blue; border: 3px solid black; transition: height 5s; transition-delay: 3s; } div:hover { height: 250px; } </style> </head> <body> <h1>CSS Transition</h1> <p>Hover over the below div and set the transition:</p> <div></div> </body> </html> |
Output
Hover over and after 3 seconds, the transition effect will be visible:
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.
Read More:
No Comments