移动端:hover需首次点击触发，不可依赖；应优先用:active+transition模拟反馈，transform+transition最稳定，须设transform-style:preserve-3d和backface-visibility:hidden，避免all过渡与opacity导致交互失效。
hover 触发必须依赖用户交互，移动端需额外处理
纯 CSS 的 :hover 在桌面浏览器中自然生效，但在 iOS Safari 和多数安卓 WebView 中，首次点击才会触发 hover 状态（即“伪悬停”），后续才可能连续响应。这意味着你不能假设移动端用户一定会看到悬停动画——尤其当按钮是表单提交或关键操作入口时。
常见错误现象：按钮在手机上点一次没反应，再点一次才变色/翻转；或者动画只闪一下就消失。
- 若需全平台一致表现，优先用
:active+transition模拟按下反馈，而非强依赖:hover - 对必须保留 hover 动画的场景，可加
touch-action: manipulation提升触摸响应，但不解决首次延迟 - 避免在 hover 中修改
display或触发布局重排（如从display: none切到block），这会导致移动端动画卡顿或失效
transform + transition 是最稳的组合，别乱用 animation
想让按钮缩放、旋转、位移，直接用 transform 配合 transition，而不是 @keyframes。前者由 GPU 加速、性能高、兼容好（IE10+），后者容易因未设 animation-fill-mode 导致状态回跳，且难以精确控制 hover 进出时机。
典型错误：写 animation: flip 0.6s，但没加 animation-fill-mode: forwards，鼠标移开后按钮立刻弹回原状。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transition: transform 0.4s ease, background-color 0.2s ease—— 多属性可共存，且各自定义时长和缓动 - 必须加
transform-style: preserve-3d才能让rotateY等 3D 变换正常渲染，否则翻转背面会透出内容 -
backface-visibility: hidden要加在被变换的元素自身上（比如button），不是父容器
翻转类动画要手动控制正反面，不能只靠伪元素
用 ::before 和 ::after 做双面翻转看似简洁，但实际中容易出问题：伪元素默认无尺寸、无法绑定事件、在部分安卓机型上渲染错位。更可靠的方式是用两个真实子元素（如 <span class="front"></span><span class="back"></span>）并配合定位控制显隐。
常见错误现象：翻转后背面文字模糊、两面同时显示、触控点击区域错位。
- 正反面都设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全重叠 - 统一设
backface-visibility: hidden，避免背面意外可见 - 用
transform: rotateX(0deg)和rotateX(180deg)分别定义初始态，hover 时改.front为-180deg，.back为0deg
阴影和颜色过渡要分开写时长，别偷懒用 all
写 transition: all 0.3s ease 看似省事，但会导致非预期行为：比如 hover 时背景色刚变完，阴影还没动完，或者边框宽度变化引发布局抖动。更稳妥的是按需指定属性。
尤其注意 box-shadow 的模糊半径（blur）和扩展半径（spread）变化时，浏览器重绘成本高，应避免在高频动画中大幅调整。
- 推荐写法：
transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease - 颜色过渡用
ease即可，transform 推荐cubic-bezier(0.22, 0.61, 0.36, 1)（类似 iOS 弹性效果），比默认更自然 - 慎用
opacity过渡做“淡入”，它会让按钮失去 pointer-events，导致快速进出时 hover 状态中断
