Bagaimana untuk Mencipta Animasi CSS3 Gelung Tak Terhingga?

Menggelung Animasi CSS3 Selama-lamanya

Dalam usaha mencipta animasi yang menawan, anda mungkin menghadapi keinginan untuk menjadikannya gelung dengan lancar selama-lamanya. Walaupun memuatkan semula halaman pada penghujung kitaran animasi mungkin kelihatan seperti penyelesaian yang mudah, ia mungkin kurang ideal. Nasib baik, terdapat cara yang elegan untuk mencapai ini menggunakan CSS3 tulen.

Dalam kod yang anda berikan, setiap imej memudar masuk dan keluar dalam tempoh yang ditetapkan. Untuk membuat gelung animasi ini secara tidak terhingga, kita perlu mengubah suai sifat kiraan lelaran animasi. Sifat ini menentukan bilangan kali animasi harus berulang.

animation-iteration-count: infinite;

Dengan menetapkan kiraan-lelaran-animasi kepada tak terhingga, animasi akan berulang selama-lamanya, memastikan imej anda pudar masuk dan keluar secara berterusan.

Berikut ialah CSS yang dikemas kini dengan sifat tambahan:

@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;
}

Kini, imej anda akan pudar masuk dan keluar selama-lamanya, mewujudkan gelung animasi yang lancar dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi CSS3 Gelung Tak Terhingga?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!