transition本身不是动画，仅在状态变化时补间；必须写在起始状态样式中，支持可插值属性如transform/opacity，慎用left/top或height:auto，timing-function按需选择，transitionend需过滤propertyName。
直接说结论：transition 本身不是动画，它只负责「在两个状态之间补间」，必须配合伪类（如 :hover）、class 切换或内联样式变更才能触发——没有状态变化，transition 就是摆设。
transition 要写在哪？写在「起始状态」上，不是 hover 里
常见错误是把 transition 写在 :hover 块里，结果鼠标移入有过渡，移出却立刻跳变。因为移出时浏览器回退到无 transition 的原始样式，补间失效。
正确做法：把 transition 声明放在元素的默认样式中（即非伪类、非动态 class 的基础选择器里）。
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: width 0.3s ease, background-color 0.3s ease;
}
.box:hover {
width: 200px;
background-color: #e74c3c;
}
-
transition必须写在触发前就存在的规则中，否则移出时无过渡 - 多个属性过渡用逗号分隔，不要写成空格
- 省略
transition-delay时默认为0s，但显式写出来更可控
哪些 CSS 属性能被 transition？不是所有都行
transition 只对「可计算、可插值」的属性生效。比如 display、height（从 auto 开始）、font-family 这些不能平滑过渡；而 opacity、transform、color、width（固定值之间）可以。
立即学习“前端免费学习笔记（深入）”；
最稳妥的组合是 transform + opacity：性能好、兼容性高、不会触发重排。
- 避免用
left/top做位移——会触发重排，卡顿明显 - 优先用
transform: translateX(20px)替代left: 20px -
height: 0→height: 200px可以过渡，但height: auto→height: 200px不行
transition-timing-function 怎么选？别全用 ease
ease 是默认值，先慢后快再慢，适合大多数交互；但按钮点击反馈需要更快响应，菜单展开需要收尾柔和，得换函数。
实际开发中高频使用的几个：
-
ease-in-out：比ease更对称，适合 toggle 类切换 -
ease-in：缓慢开始，适合「弹出后停留」类效果（如 tooltip 出现） -
cubic-bezier(0.22, 0.61, 0.36, 1)：模仿 iOS 弹性回弹，适合移动端下拉刷新提示 -
steps(4, end)：阶梯式过渡，适合数字翻牌、帧动画模拟
调试时推荐用 Chrome DevTools 的动画检查器（Animations tab），实时拖动时间轴看曲线表现。
transitionend 事件监听要注意什么？
监听 transitionend 时容易忽略两点：一是它在每个过渡属性结束时都会触发（比如同时过渡 width 和 opacity，会触发两次）；二是它不冒泡，且无法取消。
典型处理方式：
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity') {
// 只响应 opacity 结束
doSomething();
}
});
- 用
e.propertyName过滤具体属性，避免重复执行 - 过渡中途 class 被移除，
transitionend仍会触发（只要开始过） - 如果元素被快速反复添加/移除 class，建议加防抖或用
getComputedStyle检查当前状态再决定是否监听
真正难的不是写对 transition，而是判断什么时候不该用它——比如需要循环播放、多阶段控制、或依赖滚动位置驱动时，就得换成 @keyframes 或 JavaScript 动画库。过渡只是状态之间的桥梁，不是万能的动画引擎。
