按钮点击缩放动画不触发，需同时设置常态transition和:active状态transform，移动端加touch-action: manipulation，并确保父容器渲染层正常。
按钮点击时缩放动画不触发？检查 :active 伪类和 transition 是否共存
直接写 button:active { transform: scale(0.95); } 是无效的，除非同时声明 transition。CSS 动画反馈依赖状态变化 + 过渡属性，缺一不可。
-
transition必须写在常态（如button或button:not(:active)）上，不能只写在:active里 - 只写
transition: all 0.2s;容易引发意外重绘，建议明确指定属性：transition: transform 0.2s ease; - 移动端需注意
:active默认不生效，要加touch-action: manipulation;或监听touchstart
为什么点了没反应？可能是 transform 被其他样式覆盖或未触发重排
transform 动画需要元素有渲染层（layer），某些情况（如父容器 overflow: hidden + 子元素 transform 超出边界）会导致视觉“卡住”。
- 确保按钮有明确的
display（如inline-block或block），避免display: inline下transform行为异常 - 若按钮内含图标或文字，
transform: scale()会连带缩放内容，如只需视觉压感，用transform: translateY(1px)更稳妥 - 避免在
:active中同时修改background-color和transform却只对其中一个设transition，会导致部分变化突兀
button {
padding: 8px 16px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
/* 关键：transition 写在常态 */
transition: transform 0.15s ease, background-color 0.15s ease;
/* 移动端支持 */
touch-action: manipulation;
}
button:active {
transform: scale(0.96);
background-color: #0056b3;
}
想更真实一点的“按下去”效果？试试 transform: translateY() 配合阴影
纯缩放有时显得轻飘，配合微位移和阴影变化更接近物理反馈。注意 box-shadow 的过渡也要显式声明，否则不会动画。
-
transform: translateY(1px)比scale()对布局影响更小，尤其适合行内按钮群 - 加
box-shadow: 0 2px 4px rgba(0,0,0,0.15)在常态，:active中减小模糊半径或下移偏移量 - 不要用
transition: all——box-shadow计算开销大，且可能触发非预期属性动画
button {
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
button:active {
transform: translateY(2px);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
实际项目中，transform 动画是否生效，往往卡在 transition 声明位置、移动端激活态支持、或父容器的渲染限制上——先确认这三点，比调 easing 函数更重要。
立即学习“前端免费学习笔记（深入）”；
