Javascript 使用CSS动画在悬停时将下拉子类别居中

/*** OPTIONAL SETTINGS ***/
.menu {
  display: flex; /* No adjustment is necessary, but this way the menu will always be single-line, even on small screens. */
}
.menu > main-categories > a {
  display: flex; /* No need for adjustment, but this way the dot and the text within the <a> will always be placed next to each other. */
  gap: 5px; /* The distance between the two elements can be set in Flex, so there will always be a 5px distance between the dot and the text. */
}

/*** ORIGINAL SETTINGS ***/
body, html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  height: 100%;
}
body {
  background-color: #FFFFFF;
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px;
  font-weight: 400;
  color: #121212;
}
a {
  color: #121212;
  text-decoration: none;
}
a:hover {
  color: #E5633F;
}
nav {
  grid-area: navi;
  display: block;
  text-align: center;
  border-bottom: 3px solid #121212;
  background-color: inherit;
}
nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
  width: 100%;
}
main-categories {
  position: relative;
  display: inline-block;
  background-color: inherit;
  text-transform: uppercase;
  height: 42px;
  line-height: 42px;
  text-align: center;
  padding: 0px 22px 0px 22px;
}
main-categories:hover {
  color: #E5633F;
}
main-categories a {
  position: relative;
  text-decoration: none;
}   
main-categories a:hover {
  color: #E5633F;
}
main-categories a:before {
  content: '▪ ';
}
sub-categories {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  /* transform: translateX(-50%); This doesn't take effect because you have overridden it with the animation... so it should be applied at the end of the animation! */
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
}
sub-categories a {
  display: block;
  font-size: 15px;
  padding: 0 36px 0 36px;
  text-transform: capitalize;
  text-decoration: none;
  height: 36px;
  line-height: 36px;
  border-left: 1px solid #121212;
  border-right: 1px solid #121212;
  border-bottom: 1px solid #121212;
}   
sub-categories a:hover {
  color: #FFFFFF;
  background-color: #121212;
}
main-categories:hover sub-categories {
  display: block;
}
sub-categories a:before {
  content: '';
}
sub-categories {
  animation: rotateMenu 400ms ease-in-out forwards;
  transform-origin: top center;
}

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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

<nav class="menu"> 
  <!-- 1. -->
  <main-categories>
    <a href="#void">News</a>
    <sub-categories>
    <a href="#">Europe</a>
    <a href="#">Asia</a>
    <a href="#">Africa</a>
    <a href="#">Oceania</a>
    <a href="#">North America</a>
    <a href="#">South America</a>
    </sub-categories>
  </main-categories>
    
  <!-- 2. -->
  <main-categories>
    <a href="#void">Politics</a>
    <sub-categories>
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </sub-categories>
  </main-categories>

  <!-- 3. -->
  <main-categories>
    <a href="#void">Economy</a>
    <sub-categories>
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </sub-categories>
  </main-categories>

  <!-- 4. -->
  <main-categories>
    <a href="#void">Health</a>
    <sub-categories>
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </sub-categories>
  </main-categories>

  <!-- 5. -->
  <main-categories>
    <a href="#void">Education</a>
    <sub-categories>
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </sub-categories>
  </main-categories>
    
  <!-- 6. -->
  <main-categories>
    <a href="#void">Culture</a>
  </main-categories>
</nav>