css 过渡效果基础_如何使用 transition 创建平滑动画

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 动画库。过渡只是状态之间的桥梁，不是万能的动画引擎。