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;
}

Answer 1

问题出在CSS specificity中。
该规则的选择器

#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规则，该规则是一个覆盖所有其他选择器的异常。

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

在CSS中单击时动画li标签

1 个答案: