必须用 transform 而不是 left/top，因为后者触发重排，前者由 GPU 加速且不触发布局；transition 要写在默认状态而非 :hover 中，并显式声明初始 transform 值。
直接用 transform: translate() 配 transition，别碰 left、top 或 margin——否则动画一卡一跳，不是代码写错了，是触发了浏览器重排。
为什么必须用 transform 而不是 left/top
改 left 或 top 会让浏览器每帧都执行 layout（重排），尤其在快速切换或滚动中，Chrome DevTools 的 Rendering 面板会标红 “Layout”。而 transform 属于合成层操作，由 GPU 加速，不触发布局，帧率稳在 60fps。
- 父容器没设
position: relative时，left可能完全不生效；translate()不依赖定位上下文，只要元素存在就能动 - 移动端需加
will-change: transform或transform: translateZ(0)催化 GPU 加速，但只加在真正要动的元素上，否则内存占用明显上升 - 别写
box.style.left = '200px'，要写box.style.transform = 'translateX(200px)'
transition 必须写在默认状态里，不是 :hover 里
常见错误是把 transition 塞进 :hover 选择器：移入有动画，移出直接“啪”一下跳回。这是因为离开 :hover 后规则被丢弃，过渡丢失。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确写法：
.card { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }，再配.card:hover { transform: translateY(-8px); } - 即使初始位移是 0，也要显式写出
transform: translateY(0)，避免浏览器从none开始计算，导致退出时行为异常 - 多个属性要过渡？分开写：
transition: transform 0.25s, opacity 0.3s;，别用all，否则box-shadow或border微小变化也会触发额外重绘
轮播/页面切换这类多状态位移怎么写
核心是「只动容器，不动子项」。所有子元素设为 position: absolute，父容器设 position: relative 和固定尺寸，位移动画全由容器的 transform: translateX() 控制。
立即学习“前端免费学习笔记（深入）”；
- 轮播容器必须加
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);，且声明在基础样式里，不能只放 JS 切换后才加 - 淡入淡出不要用
display: none/block，改用opacity+transition: opacity 0.3s，并配合z-index确保 active 项在最上层 - 自动轮播和手动点击冲突？每次 JS 触发前先
clearInterval(this.autoPlayTimer)，监听transitionend事件后再重启定时器，并加锁this.isTransitioning = true防止连点
真正容易被忽略的是：transition 不是“写了就动”，它只响应属性值的**变化**；而 transform 的初始值如果没显式声明，浏览器可能用隐式计算值，导致动画起点不可控。所以哪怕位移是 0，也要写清楚 transform: translate(0, 0)。
