CSS transition 不支持 background-image 插值，需用伪元素控制显隐；background 简写会重置子属性；hover 中避免 transition-delay，改用 timing-function；渐变过渡需角度、色标数、颜色格式严格一致；:visited 状态下多数属性不可过渡。
background-color 与 background-image 混用时 transition 不生效？
直接写 transition: background 0.3s 对 background-image 完全无效——CSS 过渡不支持图片路径或渐变的插值计算。浏览器只能过渡颜色、尺寸、透明度等可数值化属性。
- 若想实现「悬停时背景色+背景图同时变化」，必须拆解：用
background-color单独过渡，background-image用opacity或clip-path配合伪元素模拟“切换”效果 - 更稳妥的做法是放弃过渡图片本身，改用两层结构：主元素负责过渡颜色，
::before伪元素承载图片并控制显隐（opacity或visibility） - 注意
background简写会重置所有子属性，包括background-size和background-position，导致悬停后图片拉伸或偏移
:hover 中 transition-delay 导致鼠标快速进出时卡顿
给按钮加 transition-delay: 0.1s 看似让动画更“从容”，但实际会造成鼠标反复进出时状态滞留：离开时延迟才开始反向过渡，视觉上像卡住。
- 交互按钮应避免在
:hover中设transition-delay；如需入场/离场节奏差异，用两个独立 transition 声明：transition: background-color 0.2s, transform 0.2s;transition: background-color 0.2s 0.05s, transform 0.2s 0.05s;（后者写在:hover里） - 更推荐用
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)替代延迟，它让动画前慢后快，自然规避“突兀触发”感 - 移动端需额外加
@media (hover: hover)包裹:hover规则，否则部分 iOS Safari 会误触发
使用 background-gradient 实现平滑悬停过渡的硬性条件
线性渐变（linear-gradient）本身不可过渡，但可以通过「同方向、同色标数量、同单位」的渐变定义，骗过浏览器做颜色插值。
button {
background: linear-gradient(to right, #3498db, #2c3e50);
transition: background 0.4s ease;
}
button:hover {
background: linear-gradient(to right, #2980b9, #1a252f);
}
- 起始角度必须一致（都写
to right，别一个用90deg一个用to right） - 色标数量要对齐：hover 版本不能比默认版多一个
color-stop，否则整个 transition 失效 - 颜色格式统一用 hex / rgb / hsl 中的一种，混用（如 #fff 和 rgb(255,255,255)）可能在旧版 Chrome 中中断过渡
- 慎用 transparency：rgba(0,0,0,0.1) → rgba(0,0,0,0.8) 可过渡，但若其中一个是
transparent关键字，Safari 会直接跳变
链接（a 标签）在 transition 中丢失 :visited 样式
出于隐私保护，现代浏览器禁止对 :visited 的绝大多数 CSS 属性做过渡，包括 color、background-color、border-color 等。一旦声明了 transition，:visited 下这些属性将被忽略。
- 唯一能安全过渡的
:visited属性只有outline、text-decoration（部分）、font-size（极少数场景） - 若需区分已访问链接的视觉反馈，建议用 JavaScript 记录点击并添加自定义 class，再对此 class 做完整 transition
- 不要试图用
opacity或transform绕过限制——它们虽可过渡，但无法体现“是否访问过”的语义，违背设计初衷
过渡真正难的不是写法，而是判断哪些属性能动、哪些只是看起来能动。尤其涉及渐变、伪元素和访问状态时，浏览器行为远比文档写的更保守。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
