HTML无原生过渡效果，全靠CSS的transition和@keyframes实现；transition须显式设duration，优先使用transform/opacity，避免all及触发布局的属性。
HTML 本身不提供过渡效果，所有“HTML过渡效果”实际都靠 CSS 的 transition 和 @keyframes 实现。直接写在 HTML 标签里或用 <meta http-equiv="Page-Enter"> 这类 IE 专属老语法，现代浏览器已完全不支持，也不该用。
transition 最常用组合：hover + background-color / opacity / transform
这是绝大多数按钮、卡片、导航项的过渡基础。关键不是“能做哪些”，而是“哪些必须一起配好”：
-
transition必须显式声明duration（比如0.3s），设为0s或漏写 = 没动画 - 只写
transition: all 0.3s很危险：可能意外触发 layout 变化（如height、margin），引发重排卡顿 - 推荐锁定具体属性：
transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) -
transform和opacity是性能最优的两个可过渡属性，缩放、位移、透明度变化应优先走它们
transition-property 设为 all 时的隐性风险
表面看方便，实际容易翻车：
- 某些属性根本不支持过渡（如
display、z-index、font-family），设为all会让这部分失效且无提示 - 颜色过渡时，
all会把border-color、outline-color等一并卷入，可能造成意料外的边框变色 - 如果后续 JS 动态改了
width或left，all会强行给它加过渡——但这两个属性触发布局重排，动画必然掉帧 - 真正需要“多属性联动过渡”时，应显式列出：
transition: color 0.2s, border-bottom-color 0.2s, transform 0.25s
transition-delay 不是“延迟执行”，而是“延迟开始”
这个点被大量误读。例如 transition: opacity 0.4s ease 0.2s 的含义是：
立即学习“前端免费学习笔记（深入）”；
- 状态一变（比如加了
.active类），先等 0.2 秒，再花 0.4 秒完成 opacity 过渡 - 它不会让整个过渡过程延后 0.2 秒才启动；更不会“0.2 秒后才触发样式变更”
- 常用于错峰动画：多个元素共享同一组 transition 规则时，用不同
delay值制造波浪入场效果 - 注意：
delay对正向/反向过渡都生效。如果只想进出场延迟不同，得拆成两个 class 分别控制
真正难的不是写出一个能动的 transition，而是判断哪个属性该动、哪个该静、哪个根本不能动——尤其当设计稿里写着“所有东西都要有淡入”时，得立刻意识到 font-size 和 line-height 加 transition 就是性能地雷。
