入场动画突兀主因是单一属性变化、时间过短或缓动线性；应联合使用 transform（如 translateY）与 opacity，配合适当缓动函数（如 cubic-bezier(0.25,0.46,0.45,0.94)）和时长（如0.4s），避免触发布局重排，并可加 stagger 延迟与 will-change 优化性能。
入场动画突兀，通常是因为只用了单一属性变化（比如只改 opacity），或者过渡时间太短、函数太线性。加位移（transform: translate）配合透明度（opacity），再配合适的缓动函数和时长，就能让动画更自然、有“进入感”。
用 transform + opacity 联合过渡
避免直接改 left/top/margin 这类触发布局重排的属性，优先用 transform（尤其是 translate）和 opacity——它们能走合成层，性能好，动画也顺滑。
- 写法示例：transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
- 初始状态设为：opacity: 0; transform: translateY(20px);
- 入场后状态设为：opacity: 1; transform: translateY(0);
选对缓动函数，别用 ease-in-out 硬套
标准 ease-in-out 前后都太慢，中间快，容易显得“顿”。入场动画建议用「先慢后快」或带点弹性感的曲线：
- cubic-bezier(0.25, 0.46, 0.45, 0.94)：轻微加速，柔和自然，适合大多数卡片/弹层
- cubic-bezier(0.16, 1, 0.3, 1)：更强的“冲劲感”，适合轻量提示或按钮浮现
- 想试效果？贴到 cubic-bezier.com 拖着调一调
控制延迟与分层节奏（可选进阶）
多个元素一起进场容易糊成一团。可以给子元素加 stagger（错开）：
立即学习“前端免费学习笔记（深入）”；
- 父容器设 display: flex; flex-direction: column;
- 子项用 transition-delay: calc(var(--i) * 0.1s);，配合 :nth-child(n) 或 JS 动态加 --i 变量
- 例如第 1 个延 0s，第 2 个延 0.1s，第 3 个延 0.2s……视觉上就有“依次飘入”的呼吸感
别忘了加 will-change（谨慎但有效）
如果动画频繁触发或元素较重，可在入场前（比如 hover 或 JS 添加 class 前）提前告诉浏览器：“这个元素要动了”：
- 加在初始状态里：will-change: transform, opacity;
- 注意：别全局滥用，动画结束可移除，或用 transitionend 后清除
- 多数情况下不加也够用，但卡顿时加它常是立竿见影的优化
