Question

我只是在观看视频教程，并修改了一些代码，但修改后，动画延迟对我的下拉菜单无效这是CSS的dropdwon块代码

#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

Answer 1

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

下拉动画延迟不起作用的CSS

1 个答案: