CSS 애니메이션 지연이 모든 요소에 적용되지 않습니다.

Question

제가 알 수 있듯이 짝수 및 홀수의 nth 유형에 지연을 적용하고 있지만 문제는 지연이 항상 중요하다는 것입니다. 뭐. 따라서 홀수 일 경우 10 초, 짝수 일 경우 3 초, 모든 링크는 10 초입니다. nth-of-type() -selector이 같은 부모 요소의 내부 형태의 n 번째 자식 인 모든 요소와 일치합니다

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

는 (우리는 약 형제 이야기). 중첩 된 요소에는 작동하지 않습니다. 그래서 귀하의 마크 업에 관해서는 <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>