모든 반복에 CSS 애니메이션 지연을 적용하는 방법은 무엇입니까?

CSS 애니메이션 지연: 모든 반복에 적용

지연이 있는 CSS 애니메이션을 사용하는 경우 지연이 단지 지연되는 문제가 발생할 수 있습니다. 첫 번째 반복에 적용되어 애니메이션이 원하는 간격 없이 계속 반복됩니다.

이 문제를 해결하려면 다른 접근 방식:

@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%);}
}

여기서 80% 키프레임은 키프레임과 동일하여 전체 애니메이션 길이의 80%에 해당하는 "지연"을 효과적으로 생성합니다.

숙련된 사용자라면 다음 접근 방식을 사용할 수도 있습니다.

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

이 방법에는 "지연"을 수용하기 위해 가짜 기간을 생성하는 작업이 포함됩니다. 애니메이션의 양쪽 끝.

위 내용은 모든 반복에 CSS 애니메이션 지연을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!