지그재그 애니메이션 만들기

지그재그 애니메이션은 여러 순서가 지정된 요소가 한 번에 모두 애니메이션되는 것이 아니라 각 요소 사이에 약간의 지연이 있는 순차적으로 애니메이션되는 흥미로운 효과를 제공합니다. 이 기법은 목록, 갤러리 또는 탐색 메뉴에서 사용자의 시선을 유도하고 상호작용에 세련되고 리드미컬한 느낌을 더하는 데 자주 사용됩니다.

sibling-index()를 사용한 시차 애니메이션

animation-delay 속성의 sibling-index() 속성을 사용하여 각 요소의 애니메이션이 상위 요소에서의 위치에 비례하는 수만큼 오프셋되도록 합니다. sibling-index() 함수는 정수를 반환하므로 시간 단위로 곱하여 시간으로 변환해야 합니다.

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

필수: 모션 감소를 선호하는 사용자의 경우 애니메이션을 사용 중지하여 사용자 환경설정을 존중합니다.

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

대체 전략

@supports (animation-delay: calc(sibling-index() * 0.1s)){}가 포함된 CSS 또는 !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')가 포함된 JavaScript를 사용하여 sibling-index() 지원을 테스트합니다.

이전 브라우저에서 지연 애니메이션을 지원하려면 JavaScript를 사용하여 각 동위 요소에 --sibling-index 맞춤 속성을 추가합니다. 필수: 불필요한 JavaScript가 실행되지 않도록 CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') 테스트로 래핑합니다.

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

--sibling-index 맞춤 속성을 사용하는 animation-delay 선언을 추가합니다. sibling-index() 함수를 사용하는 animation-delay 선언 앞에 있어야 합니다. @supports로 래핑할 필요가 없습니다. 이전 브라우저는 두 번째 선언을 파싱하지 않고 첫 번째 선언을 사용합니다.

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}