按钮点击缩放用:active最直接，需配合transition实现柔和效果；波纹等持续反馈须用@keyframes配合js添加class触发，避免与:active冲突；移动端要注意ios safari兼容性及性能优化。
按钮点击瞬间缩放用 :active 最直接
用户手指或鼠标按下时，需要立刻看到视觉变化，:active 是唯一能响应“按下态”的伪类。它不依赖 JavaScript，原生、轻量、无障碍友好。
常见错误是只写 transform: scale(0.95) 却忘了加 transition，导致缩放突兀或无动画。必须配合过渡才能有“按下去”的柔和感：
button {
transition: transform 0.1s ease;
}
button:active {
transform: scale(0.95);
}
- 时间建议控制在
0.08s–0.15s，太长像卡顿，太短难感知 - 避免在
:active中修改width/height，可能触发重排，影响性能 - 移动端需注意：部分 iOS Safari 对
:active支持受限，可加cursor: pointer或绑定空onclick激活
点击后出现波纹或颜色渐变要用 @keyframes
:active 只管“按下”，但“松开后高亮一下”“点击后弹出微光”这类持续性反馈，得靠 @keyframes 配合 animation 触发。
关键点在于：不能直接在 :active 里写 animation，因为松手即失效；正确做法是用 JS 添加临时 class，或用 :focus + animation 模拟（适合键盘操作）：
立即学习“前端免费学习笔记（深入）”；
@keyframes ripple {
0% { opacity: 0.6; transform: scale(0); }
100% { opacity: 0; transform: scale(2); }
}
button.ripple-effect::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(0,0,0,0.2);
animation: ripple 0.4s ease-out forwards;
}
- 动画时长建议 ≥
0.3s，否则人眼来不及识别“发生了什么” - 用
::after而非直接改按钮背景，避免干扰文字渲染和点击区域 - 务必加
forwards，否则动画结束会回退到初始状态，失去“已点击”提示
同时用 :active 和 @keyframes 时的冲突点
两者叠加容易出问题：比如 :active 缩放 + 点击后波纹动画，若没控制好时序，会出现“按下时波纹还没起，松手后才突然放大又缩小”这种割裂感。
解决核心是分离职责：:active 只负责按下态瞬时响应，@keyframes 由 JS 控制触发时机：
- 给按钮绑定
click事件，动态添加 class（如is-clicked），动画写在该 class 下 - 用
animation-delay: 0.05s错开:active和波纹开始时间，让缩放先发生，再扩散 - 避免对同一属性（如
transform）在:active和@keyframes中同时操作，浏览器会取最终值，行为不可控
移动端真机测试最容易忽略的兼容细节
安卓 Chrome 通常没问题，但 iOS Safari 对 :active 默认禁用，且 transform 动画在低配设备上易掉帧。
- 必须给按钮加
touch-action: manipulation，否则 iOS 可能延迟 300ms 才触发:active - 用
will-change: transform提前告知浏览器该元素将动画，提升渲染效率 - 真机测试时关掉“减少动画”系统设置，否则所有
transition和animation可能被强制禁用
复杂交互反馈不是堆效果，而是分清“按下”“松手”“完成”三个阶段各自该做什么，错了一步，整个反馈就显得卡、假、慢。
