Bagaimanakah Saya Boleh Memainkan Berbilang Animasi CSS Secara serentak pada Kelajuan Berbeza?

Memainkan Berbilang Animasi CSS Serentak dengan Kelajuan Yang Berbeza

Kod yang diberikan gagal melaksanakan berbilang animasi CSS secara serentak disebabkan sintaks yang tidak betul. Untuk menganimasikan elemen dengan berbilang animasi, setiap animasi hendaklah diisytiharkan secara berasingan dalam sifat animasi, dipisahkan dengan koma.

Untuk mencapai kesan yang diingini iaitu memutar dan menskala elemen secara tidak segerak:

1. Isytiharkan animasi harta:

   .image {
    animation: spin 2s linear infinite, scale 4s linear infinite;
   }

2. Tentukan animasi putaran untuk putaran:

   @-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
   }

3. Tentukan animasi skala untuk pertumbuhan:

   @-webkit-keyframes scale {
    100% {
        transform: scaleX(2) scaleY(2);
    }
   }

Kod yang diubah suai membenarkan kedua-dua animasi dimainkan secara serentak, mencapai kesan yang diingini untuk memutar dan mengembangkan elemen pada kelajuan yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memainkan Berbilang Animasi CSS Secara serentak pada Kelajuan Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!