Bagaimanakah Saya Boleh Mencetuskan Berbilang Animasi CSS serentak dengan Kelajuan Berbeza?

Serentak Mencetuskan Berbilang Animasi CSS dengan Kelajuan Berbeza

Dalam contoh anda, anda bertujuan untuk mencetuskan dua animasi CSS yang melibatkan putaran dan kesan skala serentak. Walau bagaimanapun, anda menghadapi masalah di mana hanya animasi yang terakhir dimainkan.

Untuk menangani perkara ini, penyelesaian yang betul ialah menggunakan koma untuk menentukan berbilang animasi dalam satu sifat animasi. Setiap animasi boleh mempunyai set sifatnya sendiri, termasuk tempoh dan kelajuan.

Contoh Diubah Suai:

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

Penjelasan:

Dalam kod yang diubah suai ini, kami mentakrifkan sifat animasi untuk memasukkan kedua-dua animasi "putaran" dan "skala", dipisahkan oleh koma. Animasi putaran akan melengkapkan kitarannya setiap 2 saat, manakala animasi skala akan melengkapkan kitarannya setiap 4 saat.

Dengan menggabungkan berbilang animasi dengan kelajuan berbeza dalam satu sifat animasi, anda boleh mencapai kesan yang diingini mempunyai kedua-dua animasi putaran dan pertumbuhan bermain serentak pada kelajuan masing-masing.

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