transition不能单独设置移出动画，它只响应属性变化；正确做法是将transition声明写在:hover中实现慢入快出，基础状态不写以确保移出时瞬间回弹。
transition 不能单独设置“移出动画”
CSS 的 transition 本身没有“进入/移出”两套规则，它只响应属性变化——鼠标移入时属性变，触发过渡；移出时属性变回去，照样走同一个 transition。想让移出效果不同，本质是得让“移出时的属性变化路径”和“移入时不一样”。
- 常见错误现象：
transition: all 0.3s ease;写在基础状态里，结果 hover 和移出都用同一组缓动和时长，完全无法区分 - 正确做法：把
transition声明写在 hover 状态里，而不是默认状态 - 原因：这样移入时有过渡，而移出时回退到无
transition的基础样式，浏览器会立刻跳变（或按基础状态的 transition 走——取决于你放哪）
hover 里设 transition 实现“慢入快出”
这是最常用、兼容性最好、也最可控的方式。关键在于：默认状态不写 transition，只在 :hover 里写。
button {
background: #ccc;
/* 不在这里写 transition */
}
button:hover {
background: #007bff;
transition: background 0.4s cubic-bezier(0.2, 0.8, 0.4, 1);
}- 移入：按
cubic-bezier(0.2, 0.8, 0.4, 1)缓动，0.4 秒渐变 - 移出：因为基础状态没声明
transition，浏览器直接切回#ccc，视觉上就是“瞬间回弹” - 注意：如果基础状态写了
transition: all 0.1s linear，那移出也会被它接管，反而破坏意图
用 transition-property 区分进出影响的属性
有时你只想让某个属性“慢入”，另一个属性“快出”，比如图标旋转 + 背景色渐变。这时候靠 transition-property 拆开控制更稳妥。
a {
color: #333;
transform: scale(1);
}
a:hover {
color: #007bff;
transform: scale(1.1);
transition:
color 0.3s ease,
transform 0.15s ease-out;
}- 移入时：
color慢变，transform快变 - 移出时：同样走这两条规则——但你可以反向利用：把快的属性放在 hover 里，慢的留在基础状态（不过这容易混乱，推荐统一放 hover）
- 坑：别用
transition: all搭配这种精细控制，它会覆盖掉你对单个属性的设定
JavaScript 配合 class 切换实现完全独立进出动画
当纯 CSS 控制力不够（比如要移出时播放一个反向的贝塞尔曲线、或延迟触发），就得靠 JS 主动加/删 class，并为两个 class 分别写过渡规则。
立即学习“前端免费学习笔记（深入）”；
.btn {
background: #eee;
}
.btn--hovering {
background: #007bff;
transition: background 0.35s ease-in;
}
.btn--leaving {
background: #eee;
transition: background 0.12s ease-out;
}- 鼠标移入：加
btn--hovering类 → 触发 ease-in 进入 - 鼠标移出：先加
btn--leaving，再用setTimeout移除它（或监听transitionend）→ 触发独立的 ease-out 离开 - 注意：两个 class 的
transition必须互斥生效，否则会打架；建议用!important或更高优先级选择器保底
CSS 过渡的“逆向”不是靠反转动画，而是靠切换触发时机和作用对象。最容易被忽略的是：transition 声明的位置决定了谁管移入、谁管移出——写错地方，效果就全乱了。
