为什么具有缓入缓出功能的 CSS 过渡在悬停时表现平稳，但在鼠标移开时表现突然？

CSS 过渡缓入缓出难题

使用 all 属性和 escape-in​​ 将过渡应用到元素时缓动功能，如示例小提琴（http://jsfiddle.net/garethweaver/Y4Buy/1/）所示，当鼠标悬停在元素上时，元素会平滑过渡。然而，当鼠标移开时，它会突然弹回。问题是为什么会发生这种情况以及如何解决它。

解决方案在于针对基本元素，而不仅仅是用于过渡属性的 :hover 伪类。通过在元素本身上定义过渡，它在进入和离开悬停状态时都适用。

更新的示例

更正的CSS代码：

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

通过此修改，图像现在可以在两个方向上平滑过渡，悬停时缓入，当鼠标退出图像区域时缓出。

以上是为什么具有缓入缓出功能的 CSS 过渡在悬停时表现平稳，但在鼠标移开时表现突然？的详细内容。更多信息请关注PHP中文网其他相关文章！