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:
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:
<!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:
<!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:
<!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