首页 > web前端 > css教程 > 为什么具有缓入缓出功能的 CSS 过渡在悬停时表现平稳,但在鼠标移开时表现突然?

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

Barbara Streisand
发布: 2024-10-29 23:56:29
原创
1024 人浏览过

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

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板