时间戳

首页 > 解决方案 > 下拉动画延迟不起作用css

html - 下拉动画延迟不起作用css

问题描述

我只是在看一个视频教程，我修改了一些代码，但是在我修改之后，动画延迟对我的下拉不起作用这里是 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">▼&lt;/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

标签： htmlcssanimation

解决方案

#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">▼&lt;/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>

推荐阅读