javascript - 悬停时为简单的 CSS 下拉导航栏设置动画

Question

更新的代码和问题

我有一个简单的导航栏，我试图在悬停下拉菜单时添加一些动画。但我无法让它工作，所以我需要一些帮助来理解为什么它不起作用。

这是 html

<nav> 
<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>
    
<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>
    
<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>

<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>

<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>
    
<main-categories><a href="#void">Culture</a></main-categories>

</nav>

这是CSS

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%);
  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)
    }
    70% {
    transform: rotateX(20deg) 
    }
    100% {
    transform: rotateX(0deg) 
    }

我还在这里创建了一个 Codepen 来查看它的工作情况 https://codepen.io/familias/pen/XWygWzY

知道为什么效果不起作用或者如何实现此效果吗？

Answer 1

在 CSS 动画末尾添加一个分号，如下所示:

sub-categories {
  animation: rotateMenu 400ms ease-in-out forwards;
  transform-origin: top center;
}