CSS animation-delay 不适用于所有元素

Question

如您所见，我对偶数和奇数 nth-of-type 应用了延迟，但问题是两者的延迟总是相同的，无论如何。因此，如果我将 10 秒放在奇数上，将 3 秒放在偶数上，那么所有链接都是 10 秒。

a {
          position: relative;
          line-height: 200%;
          display: inline-block;
          text-transform: uppercase;
          font-size: $header-link-size;
          transform: scale(0);
          animation: scaleIn .5s;
          animation-fill-mode: both;

          &:nth-of-type(even) {
            animation-delay: 2s;
          }

          &:nth-of-type(odd) {
            animation-delay: 3s;
          }

          @keyframes scaleIn {
            from {
              transform: scale(0);
            }
            to {
              transform: scale(1);
            }
          }
}

Answer 1

nth-of-type() -selector 将匹配同一父元素内某个类型的第 n 个子元素(我们谈论兄弟)。它不适用于嵌套元素。所以关于你的标记每 <a>在 <li> 里面是唯一的，因此它总是奇数，并且动画延迟对所有对象都是相同的。

您必须选择偶数和奇数 <li>元素并将动画延迟添加到它们的链接。

a {
  position: relative;
  line-height: 200%;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1em;
  transform: scale(0);
  animation: scaleIn .5s;
  animation-fill-mode: both
}
li:nth-of-type(even) a {
  animation-delay: 1s
}
li:nth-of-type(odd) a {
  animation-delay: 2s
}
@keyframes scaleIn {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<ul>
  <li><a class="active" href="">Home</a>
  </li>
  <li><a href="">Portfolio</a>
  </li>
  <li><a href="">About</a>
  </li>
  <li><a href="">Contact</a>
  </li>
</ul>