Bagaimana untuk Memainkan Berbilang Animasi CSS Pada Masa yang Sama?

Artikel ini menunjukkan demonstrasi praktikal untuk memainkan/menambah berbilang animasi CSS pada masa yang sama.

Bagaimana untuk Memainkan Berbilang Animasi CSS Pada Masa yang Sama?

Dengan menggunakan berbilang animasi CSS pada masa yang sama, pembangun boleh mencipta antara muka yang lebih menarik dengan mudah. Untuk memainkan banyak animasi CSS pada masa yang sama, berikan setiap satu nama unik dan gunakan nama tersebut pada komponen yang sama atau berasingan pada halaman.

Ikuti prosedur di bawah untuk memainkan/menambah lebih daripada satu animasi pada masa yang sama.

Langkah 1: Penciptaan Struktur

Mula-mula, buat elemen HTML di mana animasi digunakan dalam langkah yang akan datang. Sebagai contoh, imej akan dimasukkan:

Dalam coretan kod di atas:

• Pertama, laluan imej ditetapkan kepada ' src ” atribut.
• Seterusnya, nilai “ 100px ” disediakan untuk sifat 'lebar' dan 'tinggi' CSS.
• Juga, tetapkan nilai ' menghidupkan ' kepada ' kelas ” atribut.

Langkah 2: Menyediakan Animasi

' bingkai utama ” digunakan untuk mencipta animasi tersuai mengikut keperluan halaman web. Sebagai contoh, dua animasi dicipta dalam coretan kod di bawah:

Dalam coretan kod di atas:

• Pertama, ' @-webkit-keyframes 'mekanisme sedang digunakan untuk menyediakan' berputar ” dan “ berputar ” bernama animasi.
• Seterusnya, gunakan ' mengubah ” harta yang mempunyai nilai “ putar() ' di dalam ' berputar ” badan animasi. Fungsi ini memutarkan elemen pada sudut ' 180deg ”.
• Selepas itu, tetapkan animasi yang membesar atau memanjangkan elemen asal dengan faktor “ 1 'dalam kedua-dua' X ” dan “ DAN 'paksi dalam' skala ” badan animasi.

Langkah 3: Menggunakan Animasi pada Elemen HTML

Di dalam bahagian CSS, pilih kelas “ menghidupkan ” yang ditugaskan kepada “ ”, dan berikan sifat CSS berikut:

Perihalan sifat yang digunakan dalam blok kod di atas:

• Mula-mula, tetapkan nilai ' mutlak 'kepada CSS' kedudukan ” harta benda. Ia menyelaraskan ' img ” elemen mengikut animasi.
• Kemudian, berikan nilai ' 60% ”, “ 110px ” dan “ 110px 'kepada CSS' dibiarkan ”, “ lebar ” dan “ ketinggian ” hartanah. Sifat ini digunakan untuk menetapkan kedudukan dan saiz elemen.
• Selepas itu, tetapkan nilai “ skala 3s linear tak terhingga ' kepada ' -webkit-animasi ” Harta CSS.
• Dan juga ' 3s ' ialah tempoh animasi itu, ' tak terhingga ' ialah tempoh animasi, dan ' linear ” ialah arah animasi.
• Pada akhirnya, berikan nilai ' putaran 2s linear tak terhingga 'kepada CSS' -webkit-animasi ” harta benda. Harta ini menambah animasi kedua bernama “ berputar ' pada ' img ” unsur.

Selepas penyusunan blok kod di atas, animasi kelihatan seperti ini:

Gif di atas menggambarkan bahawa hanya ' berputar ” animasi sedang dimainkan pada elemen yang disasarkan.

Langkah 4: Memainkan Berbilang Animasi pada Elemen HTML

Seperti dalam langkah di atas, hanya satu animasi telah digunakan pada elemen. Ini kerana berbilang nilai telah diberikan kepada ' yang sama -webkit-animasi ” harta benda.

Untuk menyelesaikan isu ini, bungkus elemen sasaran dengan elemen HTML yang lain. sebagai ' div ' sudah digunakan sebagai pembungkus dalam langkah pertama, pilih ' rentang ” dan kemas kini kod seperti:

Dalam kod di atas:

• Pada mulanya, ' menghidupkan kelas ” kekal sama dan hanya animasi kedua dikeluarkan daripadanya yang diletakkan dalam “ rentang ” kelas.
• Selepas itu, tetapkan kedudukan dengan menggunakan ' kedudukan ” dan “ atas ” hartanah.

Selepas pelaksanaan coretan kod di atas, halaman web kini kelihatan seperti ini:

Output menunjukkan bahawa kedua-dua animasi telah digunakan pada elemen HTML yang dipilih pada masa yang sama.

Kesimpulan

Untuk menggunakan berbilang sifat CSS, bungkus elemen dengan elemen HTML dan gunakan animasi padanya supaya setiap elemen HTML memegang satu animasi. Memandangkan sifat anak mewarisi animasi yang digunakan pada elemen HTML induk, berbilang animasi digunakan tanpa menyebabkan ralat atau kekaburan untuk pengkompil. Itulah prosedur untuk memainkan/menambah lebih daripada satu animasi CSS pada masa yang sama.