Mengapakah Animasi Spin CSS3 Saya Tidak Berfungsi dalam Chrome?

Animasi Putaran CSS3

Dalam kod HTML yang anda berikan, anda telah menggunakan pelbagai sifat animasi CSS3 pada elemen div. Walau bagaimanapun, animasi tersebut nampaknya tidak berfungsi walaupun menggunakan keluaran stabil terkini Chrome.

Memahami Animasi CSS3

Untuk menggunakan Animasi CSS3 dengan berkesan, anda mesti mematuhi urutan langkah tertentu:

1. Tentukan Sifat Animasi: Anda mesti menentukan sifat animasi untuk elemen, seperti nama animasi, tempoh animasi, kiraan lelaran animasi dan masa animasi- fungsi, seperti yang telah anda lakukan dalam kod anda.
2. Tentukan Kerangka Kunci Animasi (Tiada dalam Kod Anda): Anda perlu mewujudkan bingkai kunci animasi sebenar menggunakan peraturan @keyframes. Kerangka utama mentakrifkan cara elemen harus muncul pada titik tertentu semasa urutan animasi.
3. Keserasian Pelayar: Pastikan penyemak imbas yang anda gunakan menyokong Animasi CSS3. Kebanyakan penyemak imbas moden, termasuk Chrome, menyokong ciri ini.

Penyelesaian: Menambah Kerangka Kunci

Dalam kod anda, anda telah menentukan sifat animasi tetapi bukan bingkai kunci animasi. Untuk menyelesaikan masalah ini, tambahkan peraturan bingkai utama berikut:

<code class="css">@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

Peraturan bingkai kunci ini menentukan bahawa elemen harus berputar dari 0 darjah kepada 360 darjah semasa animasi.

Demo

Dengan peraturan bingkai utama ditambahkan, kod anda kini hendaklah seperti berikut:

<code class="html"><div>
</div></code>

<code class="css">div {
    ... (same animation properties as before)
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

Kod ini harus menghasilkan animasi putaran untuk elemen div.

Atas ialah kandungan terperinci Mengapakah Animasi Spin CSS3 Saya Tidak Berfungsi dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!