CSS移动端导航栏kebab菜单点击转X过渡动画异常如何解决？

核心问题定位 #

你当前的动画异常主要由3处配置错误导致：

1. .hamburger容器设置了overflow: hidden，拉长为X形的线条会被容器直接截断
2. transform-origin旋转基点配置错误，导致线条旋转后位置偏移
3. X形态下的translateY位移值未匹配kebab点的初始间距，两条斜线无法对齐交叉

调整后的完整可运行代码 #

HTML

<body>
  <header>
    <nav>
      <button aria-controls="primary-navbar" aria-expanded="false" class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </button>        
    </nav>
  </header>
</body>

CSS

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #000;
  overflow-x: hidden;
}
header {
  position: fixed;
  width: 100%;
  height: 5rem;
  z-index: 10000;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.hamburger {
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
  border: none;
  appearance: none;
  background: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 4px;
  height: 4px;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  transform-origin: center;
  transition: 0.4s;
}
.hamburger span:last-child {
  margin-bottom: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  width: 28px;
  transform: translateY(9px) rotate(45deg);
  transition-delay: 0.1s;
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  transform: translateX(40px);
  transition-delay: 0s;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  width: 28px;
  transform: translateY(-9px) rotate(-45deg);
  transition-delay: 0.1s;
}

JS

const navToggle = document.querySelector(".hamburger")
navToggle.addEventListener("click", () => {
  const visibility = navToggle.getAttribute("aria-expanded");
  navToggle.setAttribute("aria-expanded", visibility === "false");
});

额外优化说明 #

• 给header添加了box-sizing: border-box，避免padding撑宽容器导致横向滚动
• 调整过渡时序，中间点先消失、两侧线条再旋转，动画更流畅
• 固定了按钮的宽高，避免点击区域跳动

内容的提问来源于stack exchange，提问作者Noel Huibers