按钮状态切换不自然的主因是未在默认状态中定义transition，导致进出动画不一致；应显式声明需过渡的属性、统一各交互态的过渡参数，并排查样式覆盖与属性兼容性问题。
按钮状态切换不自然，通常是因为背景色、文字颜色等属性在 :hover 或 :active 中直接突变，缺少过渡动画。用 transition 可以让变化平滑起来，但要注意写法细节，否则可能无效或效果奇怪。
确保 transition 写在默认状态上
过渡效果必须定义在元素的**初始（非伪类）状态**中，而不是只写在 :hover 里。浏览器只会在属性值发生变化时触发 transition，如果 transition 只在 hover 里，鼠标移入时才加，移出时就没有了，导致“进有动画、出无动画”。
- ✅ 正确写法：button { background: #007bff; color: white; transition: background 0.3s ease, color 0.3s ease; }
- ❌ 错误写法：button:hover { background: #0056b3; color: #e9ecef; transition: background 0.3s ease, color 0.3s ease; }
指定要过渡的属性，避免 all 带来意外行为
用 transition: all 0.3s ease 看似省事，但容易引发问题：比如添加 box-shadow、transform 或 border 后，所有属性都跟着动，可能卡顿或干扰交互。更稳妥的是**显式列出需要过渡的属性**。
- 推荐写法：transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
- 注意别名：
background和background-color效果不同；如果用了渐变背景，background无法过渡，得改用background-image+ CSS 变量配合@property（高级场景）
统一 hover / active / focus 的过渡节奏
按钮常有多个交互态（悬停、点击、聚焦），若各态 transition 参数不一致，进出动画会不连贯。建议所有交互态共用同一套过渡逻辑，靠改变颜色值来区分状态，而非重写 transition。
立即学习“前端免费学习笔记（深入）”；
- 示例：button { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
button:hover { background-color: #0056b3; }
button:active { background-color: #004085; }
button:focus { outline: 2px solid #007bff; } - 小技巧：用
cubic-bezier(0.4, 0, 0.2, 1)（和 Material Design 一致）比ease更自然，有轻微缓入缓出感
检查是否被其他样式覆盖或重置
有时候 transition 写对了却没效果，很可能是被后续 CSS 覆盖，或某些属性本身不支持过渡（如 display、height 在 auto 时）。可打开开发者工具，看 computed 标签下 transition 是否生效，以及 hover 时目标属性是否真在变。
- 常见陷阱：
button:focus { outline: none; }后忘记加transition: outline 0.2s;，导致焦点切换生硬 - 兼容性提醒：IE10+ 支持 transition，但需注意旧版 Safari 需加
-webkit-transition前缀（现代项目一般不用）
