时间戳

首页 > 解决方案 > 在css中单击时动画li标签

css - 在css中单击时动画li标签

问题描述

告诉我为什么代码不起作用，我hachu点击动画li标签，动画一个接一个，持续3秒

#menu #sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

@keyframes menu {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(300px);
  }
}

#menu .menu2 ul li:nth-child(2) {
  animation-delay: .3s;
}

#menu .menu2 ul li:nth-child(3) {
  animation-delay: .6s;
}

#menu .menu2 ul li:nth-child(4) {
  animation-delay: .9s;
}

#menu .menu2 ul li:nth-child(5) {
  animation-delay: 1.2s;
}
    <div class="menu" id="menu">
    <a href=""><i>fas</i></a>
    <input type="checkbox" id="sm-menu">
    <div class="sm-menu"><label for="sm-menu"><i>fa</i>fas</label></div>
    <nav class="menu2">
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a>
         <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
         </ul>
        </li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
      </ul>
    </nav>
  </div>

标签： css

解决方案

问题在于CSS 特异性。
此规则的选择器

#menu #sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

比这个 强

#menu .menu2 ul li:nth-child(2) {
  animation-delay: .3s;
}

所以它会覆盖它，并在以下规则中 使用速记animation属性覆盖。animation-delay

你有两个解决方案：
- 更好的一个：像这样使下面的规则更强大（你的 CSS 的改进版本）： 

#sm-menu:checked~.menu2 li {
  animation: menu 1.5s;
  animation-fill-mode: forwards;
}

@keyframes menu {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(300px);
  }
}

#menu .menu2 li:nth-child(2) {
  animation-delay: .3s;
}

#menu .menu2 ul li:nth-child(3) {
  animation-delay: .6s;
}

#menu .menu2 ul li:nth-child(4) {
  animation-delay: .9s;
}

#menu .menu2 ul li:nth-child(5) {
  animation-delay: 1.2s;
}
  • 第二个粗略的方法是使用!important规则，这是一个例外，它会覆盖任何其他像这样的选择器。

注意：最好尽可能使用简洁的选择器。

推荐阅读