The transition property can be set for selectors in such a way that the visual effect is different when the active selector is switched.
It feels like a different effect is happening when switching directions.
Example
<div class="my-box">
Hover over me!
</div>
.my-box {
font-size: 15px;
border: 5px solid;
text-align: center;
transition:
all /* property */
ease-in /* timing function */
1s /* duration */
50ms /* delay */;
}
.my-box:hover {
font-size: 20px;
color: green;
border-color: red;
padding: 20px;
transition:
all /* property */
steps(5, end) /* timing function */
2s /* duration */
50ms /* delay */;
}
Result
Hover over me!