按钮颜色过渡失效主因是transition未写在默认状态且属性选择错误；须将transition置于基础类中，仅作用于可动画属性，渐变按钮需用background-position过渡而非background-color。
按钮颜色过渡效果做不出来，八成是 transition 写错了位置或选错了属性——它必须放在默认状态里，且只能作用于可动画化属性（比如 background-color、color），不能靠 transition: all 蒙混过关。
transition 必须写在默认状态，不能只放 :hover 里
鼠标悬停时颜色平滑变化，但移开就“啪”一下跳回原色？这是最常见错误。根源是把 transition 只写在 :hover 选择器中，浏览器只在进入悬停时应用该规则，离开后规则失效，自然没退出动画。
正确做法是把 transition 声明放在按钮的基础样式里：
.btn {
background-color: #4A90E2;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn:hover {
background-color: #1E5799;
color: #f5f3ff;
}
-
transition必须出现在基础类（如.btn）中，确保“进”和“出”都受控 - 即使只改一个颜色，也要保证基础态和悬停态都有明确值，不能一边是
transparent、另一边是#fff—— 类型不一致可能触发意外行为 - 别用
transition: all 0.3s：它会偷偷给box-shadow、font-size等非必要属性加动画，导致卡顿或意外抖动
background-color 过渡在渐变按钮里会失效
如果你写了 background: linear-gradient(...)，再配 transition: background 0.3s，颜色大概率会“跳变”，不是平滑过渡。因为 background-image 本身不可被 transition 监听。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
真正能平滑过渡的是 background-position 和 background-size：
.btn-gradient {
background: linear-gradient(90deg, #4A90E2 0%, #9C5EDB 50%, #4A90E2 100%);
background-size: 200% 100%;
background-position: 0% 50%;
transition: background-position 0.4s ease;
}
.btn-gradient:hover {
background-position: 100% 50%;
}
- 缺一不可：
background-size必须大于 100%，否则background-position移动无效 - 初始
background-position推荐设为0% 50%（水平居中起始），便于控制流动方向 - 不要试图对
linear-gradient()中的颜色值做过渡——CSS 不支持，也不可靠
移动端点击没反馈？:active 和 touch-action 得补上
PC 上 hover 效果正常，但手机点下去没缩放、没变色、甚至有灰色高亮遮盖渐变？说明你漏了移动端关键声明。
- 必须显式定义
:active态，哪怕只是轻微压感：.btn:active { transform: scale(0.98); } - 加
touch-action: manipulation，告诉浏览器这个区域只做手势操作，禁用双击缩放等干扰行为 - 移除 iOS 默认点击高亮：
-webkit-tap-highlight-color: transparent - 注意：纯
background-color过渡在低端安卓机上可能轻微卡顿，建议搭配opacity或transform使用更稳
真正难的不是写几行 CSS，而是意识到 transition 不是“自动生效”的魔法开关——它依赖明确的起止值、正确的声明位置、以及对哪些属性真正可动画的判断。渐变按钮尤其容易栽在 background-image 的认知偏差上，一写错就全白搭。
