Why does a CSS transition with ease-in-out behave smoothly on hover but abruptly on mouse-out?

CSS Transition Ease-In Ease-Out Conundrum

When applying a transition to an element using the all property and an ease-in-out easing function, as seen in the example fiddle (http://jsfiddle.net/garethweaver/Y4Buy/1/), the element transitions smoothly when hovering over it. However, it snaps back abruptly upon mouse-out. The question arises as to why this occurs and how to resolve it.

The solution lies in targeting the base element rather than just the :hover pseudo-class for transition properties. By defining the transition on the element itself, it applies both when entering and leaving the hover state.

Updated Example

The corrected CSS code:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

With this modification, the image now transitions smoothly in both directions, easing in on hover and out when the mouse exits the image area.

The above is the detailed content of Why does a CSS transition with ease-in-out behave smoothly on hover but abruptly on mouse-out?. For more information, please follow other related articles on the PHP Chinese website!