:hover直接写background动画会闪，因浏览器未提前声明动画导致悬停时新建合成层；解决方法是默认状态设0s动画并用background-position滑入实现无闪烁动效。
为什么:hover里直接写background动画会闪一下
根本原因是浏览器渲染机制：没提前声明动画，:hover一触发就得新建合成层，帧率不稳就 visibly 闪。iOS Safari 上还可能因 background-attachment: fixed 触发 WebKit 渲染管线 Bug，直接白屏。
解决办法只有一个：按钮默认状态就必须带 animation，哪怕设成 0s。这样合成层已就位，悬停只是改 animation-play-state，不重建、不重排。
-
button { animation: bg-fade 0s; }—— 必须写，不能省 -
button:hover { animation-play-state: paused; }—— 暂停后靠 transition 补位移更稳 - 别用
background简写覆盖，否则background-size和background-position会被清掉
用 background-position 实现平滑滑入（非闪烁）
真正适合按钮的“悬停动效”不是闪烁，而是背景色块滑入——性能好、语义清、移动端也兼容。核心是控制可见区域，不是换图或改颜色。
关键三步：放大背景尺寸 → 锁定初始位置 → 过渡位移
-
background-size: 200% 100%（横向滑）或100% 200%（纵向滑） - 起始
background-position: right或100% 0，悬停时切到left或0 0 -
transition: background-position 0.35s cubic-bezier(0.3, 0.8, 0.7, 0.2)—— 用贝塞尔曲线避免机械感
示例：background-image: linear-gradient(90deg, #3498db 50%, #2980b9 50%) 配合上述设置，就能实现左右色块滑入，无任何闪烁风险。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
想做真闪烁？先确认是不是警示场景
自动闪烁在 WCAG 里属于高风险行为：周期在 0.02s–0.33s（即 3–50Hz）内，可能诱发光敏性癫痫。纯装饰性闪烁，绝大多数项目不该上。
如果真是表单校验失败、权限拒绝等明确错误反馈，才考虑用 @keyframes blink，且必须满足：
- 动画总时长 ≥
0.5s，避免高频闪烁 - 用
opacity动画，别碰visibility或display（会跳布局） - 加
pointer-events: none同步控制交互，防止用户误点抖动中的按钮 - JS 控制启停，而不是依赖
:hover—— 移动端没 hover，且快速进出易卡中间态
移动端快速进出 hover 区域卡在中间态怎么办
触摸设备没有稳定 hover 状态，手指划过按钮时，:hover 会反复触发/中断，导致 background-position 停在半途，观感突兀。
两个务实解法：
- 加
touch-action: manipulation告诉浏览器这是可交互区域，减少误判延迟 - 配合
:active { opacity: 0.8; }提供即时触觉反馈，弥补 hover 中断的空档 - 更彻底的做法：放弃
:hover，改用 JS 监听touchstart/touchend切换 class，完全掌控状态生命周期
真正难的不是让背景动起来，而是判断它该在什么时机动、动多快、动完是否留下可理解的状态痕迹。没想清这三点，代码再炫也只是干扰项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
