使用@keyframes同时控制scale和opacity实现缩放+淡入/淡出动画，需定义modal-fade与modal-fade-reverse两组关键帧，起始scale设为0.8避免渲染异常，隐藏后须监听animationend并设置display:none或移除DOM。
用 @keyframes 同时控制 scale 和 opacity
缩放+淡入/淡出动画必须用 transform: scale() 配合 opacity，不能只靠 display: none 或 visibility: hidden —— 这俩会直接跳过动画过程。@keyframes 里得把起始和结束状态写全：
@keyframes modal-fade {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
注意：起始 scale 别设成 0，否则元素尺寸为 0，内部内容可能触发重排异常或点击失效；0.8 是较稳妥的入场起点。
transition 和 animation 别混用
弹窗显示/隐藏是离散状态切换（show/hide），用 animation 比 transition 更可控。如果同时写了 transition: transform .3s, opacity .3s，又用 animation，浏览器可能丢帧或动画卡顿。
- 显示弹窗时加
animation: modal-fade .3s ease-out forwards - 隐藏弹窗时不能只删 class，得用
animation: modal-fade-reverse .3s ease-in forwards（需额外定义反向 keyframes）或监听animationend后再移除元素 - 反向动画定义示例：
@keyframes modal-fade-reverse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }
隐藏后要真正移除 DOM 或重置状态
动画播完 opacity: 0 + scale(0.8) 只是“看起来没了”，元素还在文档流里占位、能被聚焦、影响 tab 键顺序。必须在 animationend 事件里处理：
立即学习“前端免费学习笔记（深入）”；
- 用
pointer-events: none防止隐藏过程中误点 - 动画结束后设置
display: none或从 DOM 中remove() - 如果复用弹窗节点，记得重置
style.animation，否则下次播放会卡在上一次的结束态
IE 和 Safari 的 transform 兼容细节
老版本 Safari（transform 动画有渲染 bug：缩放动画可能闪烁或不触发硬件加速。要加前缀和触发层：
- 给弹窗容器加
transform: translateZ(0)或will-change: transform - keyframes 中写全前缀（虽然现代项目可忽略，但若需兼容，得加
-webkit-transform） - 别用
scaleX/scaleY单独动，统一用scale(1)，避免 Safari 对非均匀缩放的合成层降级
