Sometimes, we want to add a one-way transition with CSS. In this article, we’ll look at how to add a one-way transition with CSS.
In CSS, you can create one-way transitions using the transition property. A one-way transition is typically applied when an element undergoes a change in its style, such as when it’s hovered over or clicked on, and you want to specify how it transitions from one state to another.
Here’s a basic example of how to add a one-way transition using CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One-Way Transition</title>
<style>
/* Define the initial styles for the element */
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-out; /* Specify the transition property, duration, and easing */
}
/* Define the styles for when the element is hovered over */
.box:hover {
width: 200px; /* Change the width on hover */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example we have a .box div element with initial styles (blue background color and 100×100 dimensions).
Next we’ve added a transition on the width property, specifying a duration of 0.5s and an easing function of ease-out. This transition will be applied when the width property changes.
When you hover over the .box element, its width changes to 200px due to the .box:hover selector. The transition specified in the initial .box style is applied here, causing the width to smoothly transition from 100px to 200px.
We can adjust the properties being transitioned, the duration, and the easing function according to your specific needs.
