“背景色渐变填充”实为 background-position 位移模拟，需用双色相同线性渐变、background-size: 200% 100% 及 background-position 过渡；纯色过渡则须显式声明初始 background-color 并仅 transition 该属性。
background-color 用 transition 做渐变填充，必须写对起始和结束状态
transition 不会自动“猜”你想要怎么变，它只负责在两个明确的 background-color 值之间插值。如果起始色没定义（比如父元素设了色、子元素没设），或者用了 transparent 和渐变色混搭，动画大概率不触发或跳变。
- 确保元素自身有明确的初始
background-color（哪怕只是background-color: #fff） - 不要用
background: linear-gradient(...)替代background-color——transition对background整体不生效，只认background-color - 渐变色不能直接写进
background-color，所以「背景色渐变填充」本质是「纯色 → 纯色」过渡；真要渐变效果，得换思路
想让鼠标移入时“从左到右铺满颜色”，得用 background-position + gradient
所谓“渐变填充”视觉效果，其实是用线性渐变配合背景定位位移实现的。核心是：固定一个宽高远超容器的渐变背景，再通过 background-position 移动它，制造“铺开”错觉。
- 容器需设
background: linear-gradient(to right, #007bff, #007bff)（双色相同，保证纯色感） - 加
background-size: 200% 100%，让渐变宽度翻倍 - 初始
background-position: 100% 0（色块完全在右侧外） -
:hover时设background-position: 0 0，色块就“滑入”填满 - 全程给
transition: background-position 0.3s ease
button {
background: linear-gradient(to right, #007bff, #007bff);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s ease;
}
button:hover {
background-position: 0 0;
}
transition 失效的三个高频原因
不是代码写错，而是被 CSS 层叠或渲染机制悄悄拦下了。
-
background-color初始值是transparent，而目标色是#007bff—— 某些浏览器对transparent插值支持弱，建议统一用rgba(0,0,0,0)或显式声明初始色 - 元素没有设定
display（比如display: inline的span），导致background-color无作用区域，动画不可见 - 同时写了
transition: all 0.3s，但其他属性（如height）也在变，造成卡顿或覆盖预期行为；应锁定属性：transition: background-color 0.3s, background-position 0.3s
兼容性与性能提醒
background-position 动画在 iOS Safari 15.4 之前有渲染抖动，background-color 过渡则基本全平台稳。
立即学习“前端免费学习笔记（深入）”；
- 如果只要求基础色块淡入，坚持用
background-color+transition，最省资源也最可靠 - 如果必须“方向性填充”，且要兼容老 iOS，可降级为
opacity配合伪元素遮罩，避免依赖background-position动画 - 别给大量按钮同时加这类动画，滚动中触发动画可能引发重绘压力，尤其低端安卓机
真正难的不是写出来，而是判断该用纯色过渡，还是用渐变位移模拟——前者快而糙，后者慢而准，选错就白调半天
