CSS 애니메이션을 영원히 실행하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 애니메이션을 영원히 실행하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-15 21:25:03

원래의

648명이 탐색했습니다.

How to Make CSS Animations Run Forever?

CSS Forever에서 그림에 애니메이션을 적용하는 방법

이 기사에서는 CSS3 애니메이션과 관련된 일반적인 질문인 애니메이션을 무한정 실행하도록 하는 방법에 대해 설명합니다.

도전

슬라이드쇼로 표시하고 싶은 일련의 사진이 있고 CSS3 애니메이션을 사용하여 사진 사이를 부드럽게 전환한다고 가정해 보세요. 그러나 마지막 사진이 사라지고 페이지가 다시 로드되어 슬라이드쇼가 효과적으로 다시 시작되는 기본 동작에 만족하지 못합니다.

해결책

매끄러운 반복 애니메이션을 얻으려면 다음이 필요합니다. 애니메이션이 지속적으로 반복되도록 지정하기 위해 CSS를 수정합니다. 기본적으로 CSS 애니메이션은 한 번만 실행되도록 설정되어 있습니다.

CSS에 추가할 주요 속성은 animation-iteration-count입니다. 예는 다음과 같습니다.

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

로그인 후 복사

animation-iteration-count를 무한으로 설정하면 애니메이션이 계속해서 무한 반복되어 사진 간에 원활한 전환이 이루어집니다. .

위 내용은 CSS 애니메이션을 영원히 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!