반복되는 CSS 애니메이션에서 일관된 지연을 달성하려면 어떻게 해야 합니까?

CSS를 사용하여 반복 애니메이션 스타일 지정: 애니메이션 지연 해결

CSS 애니메이션을 사용할 때 반복 효과 표시를 효과적으로 제어하는 ​​것이 중요합니다. animation-delay 속성이 첫 번째 반복에만 영향을 주어 애니메이션이 일시 중지 없이 계속 반복되는 경우 한 가지 일반적인 문제가 발생합니다.

이 문제를 해결하기 위한 한 가지 방법은 지연을 에뮬레이트하는 새 애니메이션을 만드는 것입니다. 제공된 코드에서 "expbarshine" 애니메이션은 그래디언트 스윕을 80% 지연하여 원하는 일시 중지를 효과적으로 시뮬레이션합니다. 그러나 이 접근 방식은 애니메이션의 전체 지속 시간을 변경할 수 있습니다.

다른 사용자가 제안한 대체 솔루션은 중립 중간 키프레임을 사용하는 것입니다. 아래 코드 조각에서 "팬" 애니메이션은 전체 지속 시간을 수정하지 않고도 비슷한 결과를 얻습니다.

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

중립 키프레임을 90%로 정의하면 애니메이션의 애니메이션에 영향을 주지 않고 모든 반복에 일시 중지가 효과적으로 적용됩니다. 지속. 이 접근 방식은 더 큰 제어력과 유연성을 제공하여 동일한 애니메이션을 사용하는 요소 간에 일관된 지연을 허용합니다.

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