анимировать теги li при нажатии в css

Question

скажите, почему код не работает, я хачу с помощью клика для анимации тегов 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>  

Answer 1

Проблема в 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, которое является исключением, которое переопределяет любой другой селектор, подобный этому.

Примечание. Всегда лучше использовать как можно более краткие селекторы.