무한 반복되는 CSS3 애니메이션을 만드는 방법은 무엇입니까?

CSS3 애니메이션 무한 반복

매력적인 애니메이션을 만들다 보면 애니메이션이 영원히 끊김 없이 반복되도록 만들고 싶은 욕구가 생길 수도 있습니다. 애니메이션 주기가 끝날 때 페이지를 다시 로드하는 것은 간단한 해결책처럼 보일 수 있지만 이상적이지 않을 수 있습니다. 다행히 순수 CSS3를 사용하여 이를 달성할 수 있는 우아한 방법이 있습니다.

제공된 코드에서 각 이미지는 설정된 기간에 걸쳐 페이드 인 및 페이드 아웃됩니다. 이 애니메이션을 무한 반복하려면 animation-iteration-count 속성을 수정해야 합니다. 이 속성은 애니메이션이 반복되어야 하는 횟수를 지정합니다.

animation-iteration-count: infinite;

animation-iteration-count를 무한으로 설정하면 애니메이션이 무한정 반복되므로 이미지가 지속적으로 페이드 인 및 페이드 아웃됩니다.

속성이 추가된 업데이트된 CSS는 다음과 같습니다.

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

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { 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 infinite;
    -moz-animation: fadeinphoto 7s 1 infinite;
    -webkit-animation: fadeinphoto 7s 1 infinite;
    -o-animation: fadeinphoto 7s 1 infinite;
}

.photo2 {
    opacity: 0;
    animation: fadeinphoto 7s 5s infinite;
    -moz-animation: fadeinphoto 7s 5s infinite;
    -webkit-animation: fadeinphoto 7s 5s infinite;
    -o-animation: fadeinphoto 7s 5s infinite;
}

.photo3 {
    opacity: 0;
    animation: fadeinphoto 7s 10s infinite;
    -moz-animation: fadeinphoto 7s 10s infinite;
    -webkit-animation: fadeinphoto 7s 10s infinite;
    -o-animation: fadeinphoto 7s 10s infinite;
}

.photo4 {
    opacity: 0;
    animation: fadeinphoto 7s 15s infinite;
    -moz-animation: fadeinphoto 7s 15s infinite;
    -webkit-animation: fadeinphoto 7s 15s infinite;
    -o-animation: fadeinphoto 7s 15s infinite;
}

.photo5 {
    opacity: 0;
    animation: fadeinphoto 7s 20s infinite;
    -moz-animation: fadeinphoto 7s 20s infinite;
    -webkit-animation: fadeinphoto 7s 20s infinite;
    -o-animation: fadeinphoto 7s 20s infinite;
}

이제 이미지가 무한정 페이드 인 및 아웃되어 매끄럽고 시각적으로 매력적인 애니메이션 루프입니다.

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