直接给<button>加transition可行，但须写在默认状态类中、明确指定可动画属性（如background-color、transform）、避免layout属性和display等不可动画值，并添加touch-action:manipulation适配移动端。
直接给 <button> 加 transition 是可行的，但必须写对位置、选对属性、避开常见失效陷阱——否则动画根本不会动。
transition 必须写在默认状态类里，不能只放在 :hover 或 :active 中
很多人把过渡效果写在 button:hover 里，结果鼠标移入有动画，移出却“啪”一下跳回原样。这是因为 transition 描述的是「属性变化的过程」，它得在初始状态就声明好，浏览器才知道怎么补间。
-
transition要写在基础类（如.btn）上，不是只写在伪类里 - 别偷懒用
transition: all 0.3s，会意外触发 outline、box-shadow 等非预期变化；明确列出：transition: background-color 0.25s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) - 如果按钮有
border，记得默认态和悬停态都定义 border-width 和 border-color，否则边框粗细突变无法过渡
优先用 transform 和 opacity 过渡，避免 width/height/layout 属性
对 width、height、left、top 等触发重排（reflow）的属性做过渡，会导致卡顿，尤其在低端设备或复杂页面中。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想让按钮“放大”，用
transform: scale(1.05)，不是width: 120% - 想做淡入淡出，用
opacity: 0.8，不是visibility: hidden（后者不可过渡） - 需要隐藏再显示？组合
opacity: 0+visibility: hidden+transition: opacity 0.25s，并在动画结束时用 JS 切换visibility（若需完全脱离布局流）
移动端点击无反馈？不是代码错了，是 touch-action 被锁了
iOS Safari 和部分安卓 WebView 默认压制按钮的原生点击反馈，哪怕 CSS 写得完全正确，用户也会感觉“点不动”或动画卡在中间。
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-action: manipulation到按钮样式中，告诉浏览器：“这个元素只做点击/滑动，别拦截” - 不要依赖
:hover做核心交互——触屏设备首次点击才激活 hover，且行为不一致；关键操作改用click+classList.toggle更可靠 - 快速连点时动画可能残留，可在 JS 中加
element.style.will-change = 'transform'（慎用，仅限必要场景），或用animation-play-state: paused配合@keyframes更可控
真正容易被忽略的点是：过渡生效的前提不是“写了 transition”，而是「两个状态之间，那个 CSS 属性确实发生了可动画的数值变化」。比如 display: none → block 不行，background-image 改值也不行，input:checked 本身更不行——这些都得绕开，换成可过渡的载体（label、伪元素、transform）。
