“不自然”源于缓动函数、起止值或触发时机未对齐；应统一使用cubic-bezier(0.25,0.46,0.45,0.94)，scale起始设0.9–0.95、终点为1、中段可微弹至1.02，opacity起点禁用visibility:hidden，需配合pointer-events:none，并添加will-change:opacity,transform提升GPU渲染。
当 CSS 中同时用 @keyframes 控制 opacity 和 transform: scale() 时出现“不自然”，通常不是动画本身的问题，而是缓动函数、起止值或触发时机没对齐导致的视觉割裂感。
确保使用相同的缓动曲线
opacity 和 scale 默认都走 ease，但实际渲染中，人眼对透明度变化更敏感，尤其在低 opacity 区间（如 0.1→0.3）感知明显；而 scale 在小幅度变化（如 0.95→1.05）时容易显得“发飘”。建议统一指定为 cubic-bezier(0.25, 0.46, 0.45, 0.94)（接近 ease-in-out 的平滑版本），避免一个快一个慢：
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.element {
animation: fadeInScale 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}避免 scale 值跨 1 太远
从 scale(0.7) 突然跳到 scale(1.2) 再回弹，会削弱“浮现”感，让人觉得是两个动作。更自然的做法是：
- 起始 scale 控制在 0.9–0.95 之间（轻微压缩，模拟准备态）
- 终点保持
scale(1)，不放大 - 如需强调，可在动画中段（比如 60%）短暂升到
scale(1.02)，再回落——用“微弹”代替“硬撑”
注意 opacity 起点不能是 0 + visibility: hidden
如果元素初始设了 visibility: hidden 或 display: none，即使 opacity 动画正常，浏览器可能跳过第一帧渲染，导致 scale 动画“闪一下”才开始。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 初始状态：opacity: 0；visibility: visible；pointer-events: none（防误点）
- 动画结束加
pointer-events: auto（用to或100%帧控制） - 避免和
display混用——它不支持过渡/动画
用 will-change 提前提示合成层
opacity + transform 组合本应走 GPU 合成，但某些浏览器（尤其旧版 Safari 或低端安卓）可能因未识别而降级到 CPU 渲染，造成卡顿。加一行可显著改善流畅度：
.element {
will-change: opacity, transform;
/* 动画结束后可选移除（用 JS 或 transitionend） */
} 
