水波纹动画未触发的主因是元素不可聚焦或:active状态失效；需确保button等可聚焦，div加tabindex=”0″，避免pointer-events:none和display:none，父容器设position:relative+z-index解决溢出，用transform+opacity实现gpu加速动画，并添加touch-action:manipulation优化移动端响应。
水波纹动画没触发？检查 :focus 和 :active 的触发条件
纯 css 实现水波纹，核心是靠 ::after 伪元素 + transform: scale() 动画，但很多人写了代码却看不到波纹——根本原因是点击时没真正“激活”目标元素。
常见错误现象：button 或带 onclick 的 div 点击无反应；移动端点一下闪一下但没波纹；键盘 Enter 触发不了。
- 必须确保元素可聚焦：原生
button、a、input默认支持，div需加tabindex="0" - 动画依赖
:active状态，但部分安卓 webview 或 ios safari 在非可点击语义元素上会跳过该状态 - 如果用了
pointer-events: none（比如遮罩层），水波纹容器本身也要设回pointer-events: auto - 避免用
display: none切换按钮——它会让元素完全脱离渲染树，:active失效；改用visibility: hidden或opacity: 0
overflow: hidden 被忽略？水波纹溢出是布局层级问题
波纹常超出按钮边界，甚至被裁掉一半——这不是动画写错了，而是父容器的 overflow 或 position 搞乱了层叠上下文。
使用场景：按钮嵌在卡片、模态框、固定定位导航栏里时高发。
立即学习“前端免费学习笔记（深入）”；
- 水波纹伪元素默认相对按钮自身定位，若按钮父级有
overflow: hidden，且没建立新层叠上下文，波纹就会被裁剪 - 解决方法不是删
overflow，而是给按钮加position: relative和z-index: 1，强制它成为新层叠上下文根 - 如果按钮本身是
inline元素（如span），务必加display: inline-block或block，否则overflow对伪元素无效 - 不要对伪元素单独设
overflow: hidden—— 它不生效，CSS 规范不支持对伪元素设该属性
动画卡顿或延迟？transform 和 opacity 是唯一安全组合
用 width/height 或 top/left 做波纹缩放，大概率掉帧。浏览器无法硬件加速这些属性，尤其在中低端安卓机上明显卡顿。
性能影响：实测在 60fps 边界设备上，非合成属性动画帧率可跌至 20–30fps，用户感知为“粘滞”。
- 波纹圆圈必须用
transform: scale()+opacity控制显隐，这是唯二能触发 GPU 加速的 CSS 属性组合 - 避免在动画中修改
border-radius或box-shadow—— 它们虽不触发布局重排，但会触发重绘，增加 GPU 负担 - 动画时长建议 ≤ 300ms：
transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1)比ease-in-out更自然，也更省资源 - 别用
@keyframes+animation启动波纹——每次点击都要重新播放动画，不如用transition响应:active状态切换来得轻量
移动端点击区域小？touch-action 和 cursor 不是装饰
水波纹在手机上点不准、响应慢，往往不是动画问题，而是浏览器对触摸事件的默认拦截策略导致的。
容易踩的坑：只顾视觉反馈，忘了交互基础。
- 给按钮加
touch-action: manipulation，告诉浏览器“这是可点击区域”，能缩短 iOS Safari 的 300ms 点击延迟 - 没有
cursor: pointer不影响功能，但缺失它会让桌面端用户失去视觉预期，且部分旧版 edge 会因此忽略:active - 如果按钮内含图标或文字，确保整个点击区域包裹完整——用
padding扩展热区，别只靠内容撑开尺寸 - 避免在按钮上监听
touchstart并调用preventDefault()，这会直接禁用:active，水波纹彻底失效
事情说清了就结束。最常漏的是 position: relative 和 touch-action 这两条，一漏就白调半天动画参数。