添加CSS动画后导航栏hover子分类无法居中的技术求助

问题根源 #

你设置的rotateMenu动画中的transform属性覆盖了sub-categories原本用于居中的transform: translateX(-50%)——CSS中transform是复合属性，后声明的transform会完全替换之前的，导致居中效果丢失。

解决方案一：将平移整合到动画关键帧中 #

修改动画的关键帧，把居中需要的translateX(-50%)和旋转变换合并到同一个transform声明里，同时移除sub-categories初始的transform属性：

sub-categories {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  /* 移除这里的transform: translatex(-50%); */
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
  animation: rotateMenu 400ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes rotateMenu {
  0% {
    transform: translateX(-50%) rotateX(-90deg);
  }
  70% {
    transform: translateX(-50%) rotateX(20deg);
  }
  100% {
    transform: translateX(-50%) rotateX(0deg);
  }
}

解决方案二：改用无transform的居中方式 #

如果不想修改动画，可以换一种居中逻辑，通过left:0、right:0和margin:auto实现居中，避免依赖transform：

sub-categories {
  display: none;
  position: absolute;
  width: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
  animation: rotateMenu 400ms ease-in-out forwards;
  transform-origin: top center;
}

两种方案都能让子菜单在hover时保持居中，同时保留旋转动画效果。

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