遮罩层生硬的核心问题是仅用display:none或opacity线性过渡，应改用opacity配合transform:scale(0.95→1)和ease-out动画，并添加translateZ(0)启用GPU加速，进出动效需对称。
遮罩层生硬，核心问题通常是直接用 display: none 切换、或仅靠 opacity: 0 → 1 线性过渡，缺乏视觉缓冲和空间感。用 opacity 配合 transform: scale() 或 translateZ() 做复合动画，能显著提升柔和度与沉浸感。
用 scale(0.95) → scale(1) 模拟“浮现”感
纯透明度变化是平面的，加入轻微缩放能触发人眼对“靠近”的感知，避免突兀弹出：
- 初始状态设为
opacity: 0; transform: scale(0.95); - 显示时过渡：
opacity: 1; transform: scale(1); - CSS 动画建议用
ease-out（先快后慢），比linear更自然
配合 translateZ 触发硬件加速，减少卡顿
在支持 3D 的浏览器中，加 transform: translateZ(0) 或 scale(1) translateZ(0) 可启用 GPU 加速，尤其在低端设备上让遮罩入场更顺滑：
- 推荐写法：
transform: scale(0.95) translateZ(0); - 注意不要滥用
will-change: transform，仅在必要时局部启用
隐藏时反向动画要同步，别只改 opacity
很多人只给显示加动画，隐藏时直接设 opacity: 0，导致“啪”一下消失。应保持进出动效对称：
立即学习“前端免费学习笔记（深入）”；
- 隐藏前先触发动画：
opacity: 0; transform: scale(0.95); - 动画结束后再移除元素或设
display: none（用 JS 监听transitionend） - 避免用
visibility: hidden中断动画，它会跳过过渡过程
基本上就这些。关键不是堆效果，而是让 opacity 和 transform 协同表达“出现/退场”的物理逻辑——有距离、有缓入缓出、有渲染保障。不复杂但容易忽略。
