CSS `animation-delay`가 반복되는 애니메이션의 모든 반복에 영향을 줍니까?

반복 애니메이션의 CSS 애니메이션 지연 문제

컨텍스트:

CSS 애니메이션을 만드는 것은 시각적 요소를 추가하는 강력한 도구가 될 수 있습니다. 웹페이지에 효과를 줍니다. 그러나 애니메이션 시작을 지연하도록 animation-delay 속성을 설정하면 애니메이션이 무한 반복되도록 설정된 경우 예기치 않은 동작이 발생할 수 있습니다.

질문:

animation-delay 속성이 첫 번째 애니메이션이 아닌 반복되는 CSS 애니메이션의 모든 반복에 적용되도록 하는 것이 가능합니다. 반복하시겠습니까?

답변:

아니요, animation-delay 속성은 반복되는 CSS 애니메이션의 모든 반복에 적용될 수 없습니다. 첫 번째 반복에 초기 지연이 적용되면 애니메이션 지연이 지정된 경우에도 후속 반복이 즉시 시작됩니다.

해결 방법:

일반적인 해결 방법 초기 키프레임과 동일한 임의의 비율(예: 80%)로 새 키프레임을 생성하는 것입니다. 이는 애니메이션에 보이지 않는 시간을 채워 지연을 효과적으로 생성합니다. 그러나 지연을 원하는 경우 이 접근 방식을 사용하면 애니메이션이 더 길어질 수 있습니다.

또 다른 접근 방식은 지속 시간이 다른 여러 키프레임을 사용하여 원하는 지연을 생성하는 것입니다. 예를 들어 4초 지연에 이어 1초 애니메이션을 구현하려면 다음 키프레임을 사용할 수 있습니다.

@keyframes my-animation {
  0% { ... }
  80% { ... }
  90% { ... }
  100% { ... }
}

애니메이션 기간을 5초로 설정하면 4초 지연이 발생합니다. 애니메이션이 시작되기 전에.

제한:

가치가 있습니다. animation-delay 속성은 모든 반복을 포함하여 전체 애니메이션에 적용됩니다. 따라서 동일한 애니메이션을 사용하여 다양한 요소에 대해 다양한 지연이 필요한 경우 지연이 다른 별도의 애니메이션을 만드는 등의 대체 접근 방식을 사용해야 합니다.

위 내용은 CSS `animation-delay`가 반복되는 애니메이션의 모든 반복에 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!