Bagaimanakah saya boleh mencipta animasi gelung berterusan dalam CSS3 di mana imej pertama pudar dengan lancar apabila imej terakhir pudar?-tutorial css-php.cn

Bagaimanakah saya boleh mencipta animasi gelung berterusan dalam CSS3 di mana imej pertama pudar dengan lancar apabila imej terakhir pudar?

Mary-Kate Olsen

Lepaskan： 2024-11-19 10:11:02

asal

557 orang telah melayarinya

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

Mencipta Animasi Gelung Lancar dalam CSS3

Masalah:

Anda ingin mencipta urutan animasi tak terhingga di mana yang pertama imej memudar apabila imej terakhir memudar.

Kod Disediakan:

Kod HTML dan CSS yang disediakan mewujudkan satu siri lima imej yang pudar secara berurutan, tetapi selepas mencapai imej terakhir, halaman dimuat semula.

Penyelesaian Menggunakan animation-iteration-count:

Untuk mencapai gelung tak terhingga tanpa memuat semula halaman, tambahkan sifat berikut pada peraturan animasi:

animation-iteration-count: infinite;

Salin selepas log masuk

Harta ini menentukan bilangan kali animasi harus berulang. Dengan menetapkannya kepada infinite, anda memastikan bahawa animasi berjalan selama-lamanya.

CSS yang dikemas kini:

/* 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;
}

Salin selepas log masuk

Dengan pengubahsuaian ini, urutan animasi kini akan gelung tanpa had, memastikan peralihan yang lancar daripada imej terakhir kepada yang pertama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta animasi gelung berterusan dalam CSS3 di mana imej pertama pudar dengan lancar apabila imej terakhir pudar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!