CSS 애니메이션 반복 사이에 일관된 지연을 추가하려면 어떻게 해야 합니까?

CSS 애니메이션 지연: 반복 간 일시 중지 확장

반복 간 지연이 일정한 반복 애니메이션이 아닌 반복 애니메이션을 구현하려면 첫 번째 반복에만 적용하려면 다음 방법을 고려하십시오.

1. 애니메이션 기간 조정:

한 가지 해결 방법은 원하는 지연을 애니메이션 기간에 통합하는 것입니다. 여기에는 애니메이션이 소요되는 실제 지속 시간(지연 포함)을 계산한 다음 그에 따라 animation-duration 속성을 설정하는 작업이 포함됩니다. 예:

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

이 예에서 애니메이션의 실제 지속 시간은 5초이고 지연 시간은 1초입니다.

2. 지연 및 효과에 별도의 애니메이션 사용:

또 다른 접근 방식은 지연 및 실제 효과에 대해 별도의 애니메이션을 만드는 것입니다. 이 방법은 애니메이션 자체와 독립적으로 지연을 제어할 수 있는 유연성을 제공합니다. 이를 달성하는 방법은 다음과 같습니다.

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

이 경우 '지연' 애니메이션은 불투명도를 4초에 걸쳐 0에서 1까지 점차적으로 증가시켜 페이드인 효과를 생성합니다. 그런 다음 '샤인' 애니메이션이 무한정 실행되어 의도한 전면적인 그라데이션을 만듭니다.

3. 공급업체 접두사 사용:

경우에 따라 'animation-delay' 속성과 관련된 브라우저 호환성 문제가 발생할 수 있습니다. 호환성을 보장하려면 표준 속성과 함께 '-webkit-' 또는 '-moz-'와 같은 공급업체 접두사를 포함하는 것이 좋습니다. 예:

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

추가 참고 사항:

'@-webkit-keyframes'를 사용하여 답변에서 제공된 코드는 이전 버전의 WebKit에 적합합니다. 일반적으로 호환성을 위해 필요한 경우가 아니면 최신 개발에서는 공급업체 접두사에 의존하지 않는 것이 좋습니다.

위 내용은 CSS 애니메이션 반복 사이에 일관된 지연을 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!