transition无法实现可靠淡入上移，因它仅响应属性变化且难保证opacity与transform同步；必须用@keyframes显式定义from/to双属性起止状态，并配合forwards保持终态、内联样式确保初始态生效。
为什么只用 transition 搞不定淡入+上移
因为 transition 只能响应“属性值变化”，而上移（比如 transform: translateY(-20px)）和透明度（opacity）必须同步起始、同步结束，否则会出现“先淡再移”或“移完才淡”的割裂感。更关键的是：初始位移值如果写在默认样式里，浏览器可能不触发重绘，动画压根不启动。
常见错误是这么写：
.box { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; }<br>.box.show { opacity: 1; transform: translateY(0); }
看似合理，但实际中容易因 CSS 加载时机、JS 执行顺序或父容器渲染阻塞，导致动画卡顿或直接跳变。
@keyframes 是唯一可靠方案
必须用 @keyframes 显式定义两个属性的起止状态，并让它们在同一时间轴上运行。否则浏览器无法保证同步性。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
from和to必须同时包含opacity和transform，不能只写一个 - 起始
transform值建议略大于最终位置（比如translateY(30px)），避免视觉“顶到边沿” - 必须加
animation-fill-mode: forwards，否则动画一结束就回退到初始透明+偏移状态 - 动画时长控制在
0.25s–0.4s区间，太短看不出效果，太长拖慢感知
示例：
@keyframes fadeInUp {<br> from { opacity: 0; transform: translateY(30px); }<br> to { opacity: 1; transform: translateY(0); }<br>}<br><br>.box { animation: fadeInUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
如何避免“闪一下再动”或“动一半消失”
这是最常被忽略的加载时序问题：HTML 渲染早于 CSS 解析，元素先以无样式状态出现，再突然执行动画——视觉上就是“闪”。
- 把关键
@keyframes和animation声明内联在<head>的<style>中，不要外链 CSS 文件 - 给目标元素加
style="opacity: 0; transform: translateY(30px);"行内样式，确保初始态生效 - 不要依赖 JS 添加类来触发动画——除非你明确监听了
DOMContentLoaded并做offsetHeight强制重排 - 淡出后要彻底隐藏？别在动画中改
display: none，等animationend事件后再操作
多个元素逐个淡入上移怎么写
批量用 for 循环同步加 class 或设 style，所有元素会同一帧开始动画，失去 stagger 效果。
- 优先用 CSS 的
animation-delay：给每个元素设不同延迟，如animation-delay: 0.1s、0.2s - 如果必须用 JS 控制，用
setTimeout错开 class 添加时机，而不是同步改style.animationDelay - 慎用
will-change: transform, opacity——只对频繁动画的元素加，否则引发不必要的图层提升和内存占用 - 移动端要注意：
transform触发硬件加速，但过度使用会导致滚动卡顿，尤其在低端安卓机上
真正难的不是写对那一段 @keyframes，而是让动画在各种加载路径下都稳定触发——初始样式、CSS 加载时机、JS 执行点，三者缺一不可。
