英文:
animating a simple css dropdown navbar on hovering
问题
更新后的代码和问题
我有一个简单的导航栏，我试图在悬停下拉菜单时添加一些动画效果。但是我无法使其生效，所以我需要一些帮助理解为什么它不起作用。
这是HTML代码：
<nav>
<main-categories><a href="#void">新闻</a>
<sub-categories>
<a href="#">欧洲</a>
<a href="#">亚洲</a>
<a href="#">非洲</a>
<a href="#">大洋洲</a>
<a href="#">北美洲</a>
<a href="#">南美洲</a>
</sub-categories></main-categories>
<!-- 其他代码省略 -->
</nav>
这是CSS代码：
body, html {
/* 其他样式省略 */
}
/* 其他样式省略 */
sub-categories {
/* 动画效果样式 */
}
@keyframes rotateMenu {
/* 动画关键帧样式 */
}
我还创建了一个Codepen链接，可以在这里看到效果：
https://codepen.io/familias/pen/XWygWzY
你有想法为什么效果不起作用或如何实现它吗？
英文:
UPDATED CODE AND QUESTION
I have a simple navbar and I am trying to add some animation when hovering the dropdowns. But I cannot make it to work so I need some help to understand why it is not working.
Here is the 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>
Here is the 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: '';
}
And here is the animation effect I am trying to apply when hovering
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)
}
I also created a Codepen here to see it working
https://codepen.io/familias/pen/XWygWzY
Any idea why the effect is not working or how to achieve this?
答案1
得分: 3
在CSS动画的末尾添加一个分号，就像这样：
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
英文:
Add a semicolon at the end of the CSS animation like this:
sub-categories {
animation: rotateMenu 400ms ease-in-out forwards;
transform-origin: top center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论