必须为每条线单独设置transition: transform 0.3s ease, opacity 0.3s ease；第一条顺时针转45°并位移，第二条透明隐藏，第三条逆时针转−45°并反向位移，且均需transform-origin: center确保绕中心旋转。
transition 怎么写才能让三条线动起来
单纯给 width 或 opacity 加 transition 没用——三条横线是独立的 <span>，得分别控制它们的旋转、位移和透明度。关键不是“整体切换”，而是“每条线按不同轨迹运动”。
推荐用 transform + transition 组合，且必须对每条线单独设置 transition 属性（不能只在父容器上设）：
-
transition: transform 0.3s ease, opacity 0.3s ease是基础，ease比linear更自然 - 第一条线：
transform: rotate(45deg) translate(6px, 6px) - 第二条线：
opacity: 0（直接隐藏） - 第三条线：
transform: rotate(-45deg) translate(6px, -6px)
为什么 class 切换后动画不触发
常见原因是 DOM 元素没重绘，或 transition 被覆盖。最典型的坑：用 display: none 控制菜单显隐——一旦元素 display 变成 none，所有 transform 动画立刻中断，且无法回退。
正确做法是用 visibility: hidden + opacity: 0 配合 pointer-events: none，确保元素始终在渲染树中：
立即学习“前端免费学习笔记（深入）”；
- 避免在切换 class 的同时操作
display、height或overflow - 如果用了 JS 控制，确保 class 切换后浏览器有时间触发重排（必要时加
void el.offsetWidth强制重排） - 检查是否被更高级别的 CSS 规则（比如全局重置样式）覆盖了
transition
移动端 Safari 下旋转不平滑怎么办
iOS Safari 对 transform 的硬件加速支持不稳定，尤其在 rotate + translate 同时存在时容易卡顿或跳帧。
两个实操解法：
- 给动效元素加
transform: translateZ(0)或will-change: transform（注意别滥用，会增加内存开销） - 避免用
px做translate偏移，改用rem或视口单位（如translate(0.375rem, 0.375rem)），减少小数像素导致的渲染抖动 - 不要在
:hover上直接写汉堡图标动画——移动端没有 hover，必须依赖 JS 切换 class
如何用纯 CSS 实现收起/展开状态同步
纯 CSS 无法监听点击，所以“纯 CSS 实现”其实是指用 <input type="checkbox"> 隐藏控件 + :checked 伪类驱动状态。这是目前最稳定、无需 JS 的方案。
结构要点：
- 把
<input>放在汉堡图标前，用position: absolute隐藏但保留可点击区域 - 三条线用
<span>，并用input:checked ~ .hamburger span选择器批量控制 - 注意兄弟选择器（
~）的层级关系，若中间插入其他元素，动画会失效 - 移动端需加
cursor: pointer到 label 或伪元素上，否则部分 Android 浏览器点不动
复杂点在于：三条线的 transform 起始值和结束值必须严格对应，差 1deg 或 1px 就可能看到“错位闪动”。调的时候建议先关掉 transition，手动切 class 看静止态是否对齐。
