我只是按照视频教程修改了一些代码,但是在修改之后,动画延迟对我的下拉菜单不起作用 这是 css 的 dropdwon block 代码
#nav ul li:hover #depart li{
animation: load .1s forwards;
display: block;
}
@keyframes load{
0%{
transform: translateX(25px);
}
100%{
opacity: .9;
transform: translateX(0px);
}
}
#depart li :first-child{
animation-delay: .5s;
}
#depart li :nth-child(1){
animation-delay: 1s;
}
和我想要下拉效果的 html 代码块
<div id="nav">
<nav class="container">
<ul>
<li><a href="#jumpnews">NEWS</a></li>
<li><a href="#">ANNOUNCEMENTS</a></li>
<li><a href="#">OFFICE OF THE DIRECTOR</a></li>
<li style="width: 120px;">
<a href="">DEPARTMENT <spanclass="arrow">▼</span</a>
<ul id="depart">
<li><a href="#">Information Technology</a></li>
<li style="padding-bottom: 5px;">
<a href="#">Management Information System</a>
</li>
</ul>
</li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">FACULTY</a></li>
</ul>
</nav>
</div>
希望你能帮助我,我正在自学动画css
最佳答案
#nav ul li:hover #depart li{
animation: load 1s both;
display: block;
}
@keyframes load{
0%{
transform: translateX(250px);
opacity: 0;
}
100%{
opacity: .9;
transform: translateX(0px);
}
}
#nav ul li #depart li:first-child {
animation-delay: 0.5s ;
}
#nav ul li #depart li:nth-child(2){
animation-delay: 1s;
}
<div id="nav">
<nav class="container">
<ul>
<li><a href="#jumpnews">NEWS</a></li>
<li><a href="#">ANNOUNCEMENTS</a></li>
<li><a href="#">OFFICE OF THE DIRECTOR</a></li>
<li style="width: 120px;">
<a href="">DEPARTMENT <span class="arrow">▼</span></a>
<ul id="depart">
<li><a href="#">Information Technology</a></li>
<li style="padding-bottom: 5px;">
<a href="#">Management Information System</a>
</li>
</ul>
</li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">FACULTY</a></li>
</ul>
</nav>
</div>
关于html - 下拉动画延迟不工作的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52465996/