transition 必须写在基础选择器中才真正生效，否则移出时无动画；仅 transform 和 opacity 安全高效，width/height 等触发重排易掉帧，display/background-image 等不可过渡。
transition 写在哪儿才真正生效
必须写在基础选择器里，否则只进不出、移开就跳变。浏览器只在起始和结束状态都匹配同一组 transition 声明时，才启用双向插值。
常见错误：.card:hover { width: 480px; transition: width 0.3s; } → 移出瞬间直接回退，无动画
正确做法：.card { width: 300px; transition: width 0.35s ease, opacity 0.2s; }，再在 @media 或 :hover 中仅改属性值
- JS 控制的 class（如
.card.expanded）同理：transition必须声明在.card基础规则中 - 不要依赖
:active触发过渡——它持续时间太短，几乎无法播放；改用 JS 切换 class - 所有可过渡属性（
width、opacity、transform）都得在基础态有明确初始值，不能是auto或unset
哪些属性能平滑过渡，哪些会卡顿或失效
transform 和 opacity 是最安全的选择：只触发合成（composite），不重排（reflow）、不重绘（repaint），60fps 稳定；width、height、margin、padding 虽可动，但会触发重排，小卡片还行，列表或容器级改动容易掉帧。
完全无效或不可靠的属性包括：display（静默忽略）、background-image（规范禁止插值）、height: auto（起止值不可计算）、font-size: clamp() 中的动态部分（浏览器无法插值表达式）。
- 颜色过渡要统一格式：从
rgb(255, 0, 0)到rgba(0, 128, 255, 0.8)可插值；但#ff0000到transparent在旧 Safari 中可能突变 - 别用
transition: all—— 它会让box-shadow、z-index等意外参与动画，调试困难，性能失控 - 响应式中慎用
font-size过渡：虽支持，但缩放文字常触发重排+重绘，尤其配合line-height变化时
媒体查询里怎么让断点切换也“动起来”
媒体查询本身不触发 transition，它只是批量切换样式规则。想让屏幕缩放时宽度平滑变化，不能把 transition 写在 @media 块里——那只会让该断点内后续交互有动画，不是断点跨越本身。
正确方式是把可过渡属性“抽出来”，统一声明在基础选择器中，让浏览器在不同断点间自然插值：
.card {
width: 300px;
transition: width 0.35s ease, opacity 0.2s;
}
@media (min-width: 768px) {
.card { width: 480px; }
}
@media (min-width: 1024px) {
.card { width: 640px; }
}
- 固定尺寸必不可少：如果容器高度是
height: auto，opacity过渡可能引发 layout 抖动；背景图切换必须设height: 400px这类明确值 -
background-image想“淡入淡出”？必须用双伪元素 +opacity切换，而不是给background-image加transition -
image-set()不响应视口宽度，只认 DPR —— 实际项目中按断点分层写background-image更可控
移动端和悬停交互的现实约束
移动端没有 :hover，但很多人仍用它写“伪悬停”效果，结果在 iOS 上点一下就触发、再点一下才取消，体验割裂。更糟的是，某些安卓 WebView 对 hover 支持不一致，导致动画只在部分设备生效。
真实可用策略是分离交互逻辑：用 @media (hover: hover) 检测悬停能力，为桌面端启用 :hover 动画；移动端则靠 JS 监听 click 或 touchstart 切换 class，并确保该 class 的过渡也在基础规则中声明。
- 键盘弹出时 viewport 高度突变，
flex容器若设了min-height: 100vh，表单可能被顶出可视区；grid布局对此更鲁棒 - 用户开启了“减少动画”偏好（
@media (prefers-reduced-motion: reduce)），应主动降级：设transition: none或缩短 duration - GPU 加速不是万能的：
will-change: transform要配合初始transform: translateZ(0)才生效，否则可能白加甚至引发闪烁
transition 的位置、属性选择和 fallback 处理要求完全不同。混用一套规则，大概率在某个环节突然卡住或闪退。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
