用对 transition 但元素没动，需检查三件事：目标属性是否可过渡（如 opacity、transform 可，display 不可）；初始态与终态是否均有明确值；状态变化是否由 :hover、JS 等有效触发。
transition 用对了，但元素没动？检查这三件事
CSS 动画要“平滑过渡”，transition 是最常用也最容易翻车的属性。常见现象是写了 transition: all 0.3s ease;，鼠标 hover 后颜色变了，但位置、尺寸或透明度毫无反应——大概率不是动画写错了，而是触发条件没满足。
- 目标属性必须是「可过渡的」：比如
opacity、transform、background-color可以；display、height（从0到auto）不行；position本身不可过渡，但top/left可以（前提是元素已定位） - 初始态和终态都得有明确值：比如
margin-top: 0;→margin-top: 20px;可过渡；但margin-top: auto;→20px就无效 - 过渡必须由「状态变化」触发：通常是
:hover、:focus或 JS 修改 class/classList，单纯靠父容器重排不会自动激活transition
transform + transition 组合才是位移/缩放的正确打开方式
想让一个按钮 hover 时上浮、放大，别碰 top 和 width——用 transform。它不触发重排，性能好，且支持硬件加速。
button {
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: translateY(-4px) scale(1.05);
}
注意：cubic-bezier() 比 ease 更可控；scale() 会连带文字一起缩放，如果只要按钮变大、文字不变，得单独给子元素加反向 transform: scale(0.95)。
transition-delay 和 transition-duration 容易混淆的时机问题
transition-delay 不是“延迟开始动画”，而是“延迟响应状态变化”。比如：
立即学习“前端免费学习笔记（深入）”；
.card {
opacity: 0;
transition: opacity 0.4s ease 0.2s;
}
.card.show {
opacity: 1;
}
当 JS 加上 show class 的瞬间，浏览器会等 0.2s 才开始执行 0.4s 的淡入——但如果在这 0.2s 内又移除了 show，整个过渡就直接被取消了。实际项目中，这种“半途而废”的情况很常见，尤其是快速悬停菜单项或手抖连点。
- 需要精确控制入场/离场节奏，建议拆成两个 class：
enter和leave，并用 JS 控制 class 切换时机 - 避免在同一个属性上混用
delay和多个duration，比如transition: opacity 0.3s, transform 0.5s 0.1s，容易因时间错位导致视觉断层
animation 与 transition 的分工边界在哪
简单状态切换（hover/focus/toggle）用 transition；需要多关键帧、循环播放、或独立于用户交互运行的动效，才上 @keyframes + animation。
比如加载骨架屏的流动光效、轮播图自动切换、或者一个图标从无到有的绘制动画，这些都不是“从 A 状态变到 B 状态”能描述的，transition 无能为力。
但很多人一上来就写 @keyframes，结果发现 hover 时动画重复播放、无法暂停、或和 JS 状态不同步——其实只是把该用 transition 的地方强行复杂化了。
真正难的不是写动画，是判断哪个状态该由 CSS 响应，哪个该交由 JS 控制；以及是否允许动画在页面不可见时暂停（用 animation-play-state: paused 配合 visibilitychange 事件）。
