需用JavaScript切换class配合CSS transition或@keyframes实现点击后持续渐变动画：transition适用于两色平滑切换，@keyframes配合animation-fill-mode: forwards支持多段颜色变化及停留。
button 点击后触发 background-color 渐变动画，不能只靠 :active
单纯用 :active 伪类只能维持鼠标按下瞬间的样式，松开就恢复，无法实现「点击后持续显示新颜色 + 渐变过渡」的效果。必须配合 JavaScript 切换 class，再由 CSS @keyframes 驱动动画。
用 JavaScript 切换 class 触发动画更可控
给按钮绑定 click 事件，添加一个标识状态的 class（比如 is-clicked），CSS 中定义该 class 对应的 background-color 和 transition 或 animation。关键点：
-
transition更适合「颜色在两个值之间平滑切换」，比如从蓝变绿 -
@keyframes + animation更适合「多阶段渐变」或「循环/一次性复杂路径」，比如蓝 → 黄 → 红 → 停留 - 避免同时写
transition和animation控制同一属性，容易冲突
button {
background-color: #4a90e2;
transition: background-color 0.4s ease;
}
button.is-clicked {
background-color: #ff6b6b;
}
JS 部分只需：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
document.querySelector('button').addEventListener('click', function() {
this.classList.add('is-clicked');
});
@keyframes 实现多段背景色渐变动画
如果需要三段以上颜色变化、或想控制每段停留时间，用 @keyframes 更合适。注意：动画默认不保持最终状态，需加 animation-fill-mode: forwards。
立即学习“前端免费学习笔记（深入）”；
-
animation-duration决定整个动画时长 -
animation-timing-function影响各段过渡节奏（如ease-in-out） - 百分比节点必须覆盖 0% 和 100%，否则动画可能不生效
@keyframes bgShift {
0% { background-color: #4a90e2; }
50% { background-color: #ffd93d; }
100% { background-color: #ff6b6b; }
}
button.is-animated {
animation: bgShift 1.2s ease-in-out forwards;
}
容易被忽略的兼容性与性能细节
background-color 动画本身兼容性很好（IE10+），但仍有几个实际坑：
- 不要在
button上同时设置border和background-color动画却不指定border-color—— 某些浏览器会因边框颜色未声明而触发重排 - 移动端点击有 300ms 延迟，默认
:active可能来不及响应，务必用click或touchstart - 如果按钮要支持多次点击并重播动画，得先
remove再addclass，或用animation-name: none强制重置
