Bagaimanakah Saya Mencipta Animasi Gelung Lancar dengan CSS3?

Gelung Animasi CSS3 dengan lancar

Masalah:

Anda mahukan animasi tanpa gangguan yang peralihan dengan lancar dari bingkai terakhir ke pertama, mencipta kesan gelung berterusan.

Penyelesaian:

1. Gunakan Sifat Animasi-iteration-count:

Tambahkan sifat berikut pada bingkai utama anda:

animation-iteration-count: infinite;

Sifat ini menentukan bilangan kali animasi akan berulang. Dengan menetapkannya kepada infiniti, animasi akan bergelung selama-lamanya.

2. Kod CSS yang disemak:

Berikut ialah kod CSS yang dikemas kini:

@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-webkit-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-o-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

Penjelasan:

Dengan menentukan kiraan lelaran-animasi : tidak terhingga, setiap foto akan pudar, kekal kelihatan untuk satu tempoh masa, dan kemudian pudar hanya untuk beralih dengan lancar kembali ke foto pertama, mewujudkan gelung yang tidak berkesudahan.

Nota:

Pastikan animasi anda direka bentuk supaya kelegapan beralih daripada 1 kepada 0 (atau sebaliknya) untuk gelung berfungsi dengan lancar.

Atas ialah kandungan terperinci Bagaimanakah Saya Mencipta Animasi Gelung Lancar dengan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!