07-26-2023, 06:59 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Transitions Example</title>
<style>
/* Apply a transition to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
transition: width 0.5s ease;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hover over this div to see the transition effect.</div>
</body>
</html>
Explanation:
CSS transition property is used to add smooth transitions to element property changes. In this example, when hovering over the div element, its width transitions from 200 pixels to 300 pixels with a duration of 0.5 seconds and an ease timing function.
<!DOCTYPE html>
<html>
<head>
<title>Transitions Example</title>
<style>
/* Apply a transition to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
transition: width 0.5s ease;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hover over this div to see the transition effect.</div>
</body>
</html>
Explanation:
CSS transition property is used to add smooth transitions to element property changes. In this example, when hovering over the div element, its width transitions from 200 pixels to 300 pixels with a duration of 0.5 seconds and an ease timing function.