CSSアニメーション遅延はすべての要素に適用されません

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番目の子であるすべての要素にマッチします。ネストされた要素では機能しません。あなたのマークアップに関しては、<li>の中にある<a>のすべてが唯一のものなので、常に奇妙であり、アニメーション遅延はすべて同じです。

偶数および奇数<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>