17370845950

“不自然”源于缓动函数、起止值或触发时机未对齐；应统一使用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） */
}