在网页交互开发中，给元素添加hover动画可以提升页面的动态感，但很多开发者会发现鼠标移出元素时，动画会直接跳回初始状态，没有平滑的过渡效果，这种突兀的变化会拉低用户体验。要解决这个问题，需要理解CSS动画的触发逻辑，合理设置过渡属性。
为什么hover动画离开时不平滑
出现hover动画离开不平滑的核心原因，是动画的触发和结束逻辑没有对应。大部分开发者只给hover状态设置了动画属性，没有给元素的默认状态设置对应的过渡规则，导致鼠标移出时，属性直接回到初始值，没有过渡过程。
还有一种常见情况是使用了animation属性但没有设置离开时的动画，或者transition的属性覆盖不完整，导致部分变化的属性没有过渡效果。
使用transition实现平滑离开效果
transition是最简单的实现方式，它的原理是给元素设置属性变化的过渡规则，不管是进入hover还是离开hover，只要属性发生变化，都会按照设置的过渡参数执行。
基础实现示例
下面是一个按钮hover时放大并改变背景色，离开时平滑恢复的例子：
/* 元素默认状态，设置过渡规则 */
.btn {
padding: 10px 20px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
/* 设置所有变化的属性过渡，时长0.3秒，缓动函数ease */
transition: all 0.3s ease;
cursor: pointer;
}
/* hover状态，修改属性 */
.btn:hover {
transform: scale(1.1);
background-color: #66b1ff;
}
这里给.btn元素设置了transition: all 0.3s ease，意味着所有可过渡的属性发生变化时，都会在0.3秒内以ease缓动函数完成过渡。鼠标移入时，transform和background-color会平滑变化到hover状态的值，鼠标移出时，这两个属性会平滑回到默认状态的值，不会出现跳变。
注意事项
- transition要设置在元素的默认状态，而不是hover状态，否则只有进入hover时有过渡，离开时没有。
- 如果只需要部分属性过渡，可以把all换成具体的属性名，比如
transition: transform 0.3s ease, background-color 0.3s ease。 - 缓动函数可以根据需求调整，比如linear是匀速，ease-in是慢入，ease-out是慢出。
使用animation实现平滑离开效果
如果需要更复杂的动画效果，比如关键帧动画，也可以用animation实现平滑离开。这种方式需要分别定义进入和离开的动画关键帧，再通过hover触发进入动画，默认状态设置离开动画或者利用animation的填充模式实现过渡。
实现示例
下面是一个元素hover时旋转出现，离开时旋转消失的例子：
/* 定义进入动画关键帧 */
@keyframes hover-in {
from {
transform: rotate(0deg);
opacity: 0.8;
}
to {
transform: rotate(180deg);
opacity: 1;
}
}
/* 定义离开动画关键帧 */
@keyframes hover-out {
from {
transform: rotate(180deg);
opacity: 1;
}
to {
transform: rotate(0deg);
opacity: 0.8;
}
}
/* 元素默认状态，设置离开动画 */
.box {
width: 100px;
height: 100px;
background-color: #f56c6c;
margin: 20px;
/* 默认执行离开动画，保持结束状态 */
animation: hover-out 0.3s ease forwards;
}
/* hover状态执行进入动画 */
.box:hover {
animation: hover-in 0.3s ease forwards;
}
这里通过forwards填充模式，让动画结束后保持最后一帧的状态。默认状态下元素执行离开动画，保持在旋转0度的状态，hover时执行进入动画，保持在旋转180度的状态，鼠标移出后，又会触发默认状态的离开动画，实现平滑的过渡效果。
不同场景的适配方案
如果是多个元素需要统一的hover平滑过渡效果，可以把transition或者animation的公共规则提取为公共类，减少重复代码。如果动画涉及布局变化，比如宽度、高度的变化，建议优先使用transform属性代替，因为transform的变化不会触发重排，性能更好，过渡效果也更流畅。
另外需要注意，部分旧版本浏览器可能对某些CSS属性过渡支持不完善，如果需要兼容旧浏览器，可以检查对应属性的兼容性，或者选择更通用的过渡属性。
CSShover动画transitionanimation平滑过渡修改时间：2026-06-09 03:09:20