HTML中无原生Hero动画，需用CSS transform/opacity+JS克隆定位模拟；真Hero飞行须SPA模式下快照起止位置并动态插帧，非简单transition可实现。
HTML 本身没有 Hero 动画这个原生概念——这是 Flutter 的专有术语，指跨页面共享元素的“飞入”过渡。你在 HTML/CSS/JS 环境里要实现类似效果（比如点击列表项后，该卡片“飞”到详情页顶部并展开），得靠手动组合 CSS 动画 + JavaScript 状态控制 + DOM 操作，不能直接套用 Hero 标签或 Navigator 机制。
为什么不能直接用 Flutter 的 Hero 写法
Flutter 的 Hero 依赖其路由栈、Overlay 层、Tween<rect></rect> 插值和 Widget 树复用机制，这些在浏览器中完全不存在。你看到的“HTML Hero 动画”搜索结果，大多是误用术语，实际指的是首屏大图区域（hero section）的入场动画，或是模仿 Flutter 行为的手动实现。
- 浏览器没有跨页面的“共享 widget 实例”，每次跳转都是新 DOM；若想保留视觉连续性，必须用单页应用（SPA）模式（如 React Router / Vue Router），并在 JS 层记录源元素位置尺寸
-
transition只能作用于同一元素的属性变化，无法让一个 DOM 节点“变成另一个页面里的不同节点” - 真要做“飞入”，得用
transform: translate() + scale()+ 绝对定位临时克隆节点，再配合getBoundingClientRect()计算起止矩形
CSS transition 做不了 hero 飞行，但能做 hero 区域淡入/滑入
如果你实际想要的是首页顶部 <section class="hero"> 的加载动画（常见于营销页），那 transition 完全够用，且更轻量：
- 别对
height或width做transition，会触发重排；改用transform: translateY()和opacity - 确保目标元素初始状态设为
opacity: 0; transform: translateY(20px);，再通过 JS 添加类触发transition: opacity 0.4s ease-out, transform 0.4s ease-out - 避免在
:hover里写复杂transition，用户快速划过会导致动画队列堆积；加transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)更自然
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.hero {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero.visible {
opacity: 1;
transform: translateY(0);
}
真要模拟 Flutter Hero 飞行？得用 JS + position: fixed 临时克隆
适用于 SPA 场景（如点击商品卡片跳转详情页），核心思路是：在跳转前，把源卡片位置尺寸快照下来，插入一个绝对定位的克隆节点，再用 transform 动画把它“飞”到目标区域预留位，最后移除克隆、显示真实目标内容。
- 必须用
getBoundingClientRect()获取源/目标的真实像素位置，不能依赖offsetTop（受滚动、transform 影响） - 动画期间克隆节点需设
position: fixed并用z-index置顶，否则会被其他元素遮挡 - 目标区域必须提前预留占位（比如空
<div class="hero-placeholder"></div>），否则动画终点会漂移 - 动画结束时，要清除克隆节点，并确保目标页真实内容已渲染完成（可用
requestAnimationFrame或setTimeout(..., 0)延迟移除）
容易被忽略的兼容性坑
看似简单的 transform 动画，在真实项目里常因以下细节翻车：
- iOS Safari 对
transform: scale()+will-change: transform组合有时会触发白屏，建议只在动画开始前加will-change，动画结束后立刻移除 - 使用
translateZ(0)强制硬件加速虽能提帧率，但在低端安卓机上反而增加内存开销，慎用 - 如果页面有滚动容器（非
body滚动），getBoundingClientRect()返回的是相对于该容器的坐标，需手动叠加容器滚动偏移才能对齐 - 不要用
transition控制display切换（none→block），它不触发过渡；改用visibility+opacity组合
真正难的不是写出飞行动画，而是让起点和终点矩形在各种缩放、滚动、动态内容加载场景下始终对齐——这需要反复校验 getBoundingClientRect() 的调用时机和坐标系转换逻辑。
