CSS `animation-delay`가 때때로 첫 번째 애니메이션 반복에만 영향을 미치는 이유는 무엇입니까?

CSS의 애니메이션 지연 이해

animation-delay 속성은 애니메이션이 시작되기 전의 지연을 제어하는 ​​중요한 CSS 속성입니다. 그러나 특정 시나리오에서는 애니메이션의 초기 반복에만 적용되어 후속 반복에는 영향을 주지 않을 수 있습니다.

예를 들어 다음 코드를 고려하세요.

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

이 예에서는 4초의 애니메이션 지연은 애니메이션의 첫 번째 루프에만 적용됩니다. 이후 샤인 애니메이션은 지연 없이 무한정 계속됩니다.

대체 접근 방식

애니메이션 지연을 사용하는 한 가지 대안은 애니메이션 키프레임 내에 중간 단계를 도입하는 것입니다. 예를 들면 다음과 같습니다.

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

이 기술은 원하는 지연을 수용할 수 있도록 애니메이션 지속 시간을 효과적으로 연장합니다(이 경우 전체 지속 시간의 80%). 그러나 이 접근 방식은 애니메이션의 모양을 변경할 수 있습니다.

브라우저 간 호환성

애니메이션 지연의 동작은 브라우저마다 다를 수 있다는 점에 유의하는 것이 중요합니다. . 일부 브라우저는 모든 반복에서 일관되게 지연을 적용하는 반면, 다른 브라우저는 각 후속 루프에서 지연을 재설정할 수 있습니다. 결과적으로 브라우저별 해결 방법을 사용해야 하는 경우가 많습니다.

위 내용은 CSS `animation-delay`가 때때로 첫 번째 애니메이션 반복에만 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!