마지막 이미지가 페이드 아웃되면서 첫 번째 이미지가 원활하게 페이드 인되는 연속 반복 애니메이션을 CSS3에서 어떻게 만들 수 있습니까?-CSS 튜토리얼-php.cn

마지막 이미지가 페이드 아웃되면서 첫 번째 이미지가 원활하게 페이드 인되는 연속 반복 애니메이션을 CSS3에서 어떻게 만들 수 있습니까?

Mary-Kate Olsen

풀어 주다： 2024-11-19 10:11:02

원래의

483명이 탐색했습니다.

How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?

CSS3에서 원활한 반복 애니메이션 만들기

문제:

첫 번째 애니메이션이 무한한 애니메이션 시퀀스를 만들고 싶습니다. 마지막 이미지가 페이드 아웃되면 이미지도 페이드 인됩니다.

제공 코드:

제공된 HTML 및 CSS 코드는 순차적으로 페이드 인되는 일련의 5개 이미지를 설정합니다. 마지막 이미지에 도달하면 페이지가 다시 로드됩니다.

해결책 animation-iteration-count 사용:

페이지를 다시 로드하지 않고 무한 루프를 달성하려면 다음 속성을 추가하세요. 애니메이션 규칙:

animation-iteration-count: infinite;

로그인 후 복사

이 속성은 애니메이션이 반복되어야 하는 횟수를 지정합니다. 무한으로 설정하면 애니메이션이 무한정 실행됩니다.

업데이트된 CSS:

/* Animation Keyframes*/
@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!