Berikut ialah beberapa pilihan tajuk, memfokuskan pada masalah animasi putaran tidak berfungsi: Mudah & Langsung

Animasi Putaran CSS3: Mengapa Ia Tidak Berfungsi?

S: Mengapa saya tidak dapat mengaktifkan animasi putaran CSS3, walaupun dengan Chrome terkini ?

J: Untuk menggunakan animasi CSS3, anda mesti menentukan kerangka utama animasi sebagai tambahan kepada konfigurasi awal.

Memahami Animasi CSS3

Animasi CSS3 dicapai melalui penggunaan bingkai utama, yang menentukan cara gaya elemen berubah dari semasa ke semasa. Untuk menggunakan animasi CSS3, anda mesti mentakrifkan kedua-dua pemasaan animasi dan bingkai utama.

Mentakrifkan Kerangka Kunci untuk Animasi Putaran

Untuk mencipta animasi putaran, anda mesti menentukan bingkai utama yang memutarkan elemen secara beransur-ansur daripadanya. titik permulaan ke titik penghujungnya. Anda melakukan ini menggunakan peraturan @keyframes.

Berikut ialah contoh:

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

Kerangka kunci animasi ini memutarkan elemen dari 0 darjah kepada 360 darjah, menghasilkan putaran animasi.

Menggunakan Kerangka Kunci dalam Animasi

Setelah anda menentukan bingkai utama animasi, anda boleh menggunakannya dalam pengisytiharan animasi untuk elemen HTML.

<code class="css">div {
    /* Animation timing settings */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}</code>

Dengan menggabungkan pemasaan animasi dan definisi bingkai utama, anda kini mempunyai animasi putaran CSS3 yang berfungsi.

Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk, memfokuskan pada masalah animasi putaran tidak berfungsi: Mudah & Langsung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!