여러 하위 요소에 대해 시차가 있는 CSS 애니메이션을 효율적으로 만들 수 있습니까?

하위 요소에 대해 시차 지연이 있는 CSS 애니메이션

요소의 각 하위 요소가 지연. 이를 달성하기 위해 코드 조각에서 볼 수 있듯이 각 하위 항목에 대한 애니메이션 지연을 개별적으로 수동으로 설정했습니다. 그러나 하위 요소 수에 따라 지연을 동적으로 적용하기 위한 보다 효율적인 솔루션을 찾고 있습니다.

Sass for 루프를 사용하는 CSS 솔루션은 이 문제에 대한 간결하고 확장 가능한 접근 방식을 제공합니다.

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

이 루프는 1에서 10까지 반복하고(예상 하위 요소 수에 맞게 조정 가능) n번째 하위 요소를 사용하여 각 하위에 계산된 지연 값을 할당합니다. 선택기. 지연은 하위 인덱스($i)에 원하는 지연 기간(이 예에서는 0.5초)을 곱하여 계산됩니다.

이 루프를 사용하면 수동으로 작업하지 않고도 여러 하위 요소에 계단식 지연을 적용할 수 있습니다. 개별 스타일을 작성합니다. 이 솔루션을 사용하면 각 하위 요소에 대한 스타일을 명시적으로 지정할 필요가 없으며 모든 요소에 걸쳐 일관성이 보장됩니다.

위 내용은 여러 하위 요소에 대해 시차가 있는 CSS 애니메이션을 효율적으로 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!