CSS3 애니메이션을 무한정 반복하려면 어떻게 해야 합니까?

CSS3 애니메이션 무한 반복

CSS3 애니메이션은 웹페이지의 요소에 애니메이션을 적용하는 편리한 수단을 제공합니다. 그러나 기본적으로 이러한 애니메이션은 한 번만 재생됩니다. 애니메이션이 계속 반복되도록 하려면 특정 CSS 속성을 사용해야 합니다.

도전

일련의 이미지가 계속해서 페이드 인 및 페이드 아웃되도록 하고 싶습니다. 페이지를 다시 로드하세요.

해결책

CSS3 애니메이션의 끝없는 반복을 활성화하는 열쇠는 animation-iteration-count 속성에 있습니다. 이 속성은 애니메이션이 중지되기 전에 반복되는 횟수를 지정합니다. 이 속성을 무한으로 설정하면 브라우저에 애니메이션을 무한정 실행하도록 지시할 수 있습니다.

제공된 코드에서 CSS 클래스를 사용하여 여러 이미지 컨테이너를 정의했습니다. 연속 반복을 활성화하려면 각 이미지의 CSS 규칙에 다음 줄을 추가하세요.

animation-iteration-count: infinite;

다음은 속성이 추가된 업데이트된 CSS입니다.

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

animation-iteration을 설정하여- 각 이미지에 대해 무한까지 카운트되므로 페이드인 애니메이션이 끝없이 반복되어 중단 없이 이미지 간에 원활하게 전환됩니다. 이렇게 하면 애니메이션이 계속 반복되는 듯한 착각이 들게 됩니다.

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