Artikel ini mendemonstrasikan demonstrasi praktis untuk memutar/menambahkan beberapa animasi CSS secara bersamaan.
Bagaimana Cara Memainkan Beberapa Animasi CSS Sekaligus?
Dengan menerapkan beberapa animasi CSS secara bersamaan, pengembang dapat dengan mudah membuat antarmuka yang lebih menarik. Untuk memainkan banyak animasi CSS secara bersamaan, berikan masing-masing nama yang unik dan terapkan nama tersebut ke komponen yang sama atau terpisah di halaman.
Ikuti prosedur di bawah ini untuk memutar/menambahkan lebih dari satu animasi secara bersamaan.
Langkah 1: Penciptaan Struktur
Pertama, buat elemen HTML tempat animasi diterapkan di langkah selanjutnya. Misalnya, gambar akan dimasukkan:
< div kelas = 'menjangkau' >
< img src = 'buku.jpg' tinggi = '100px' lebar = '100px' kelas = 'menghidupkan' >
< / div >
Dalam cuplikan kode di atas:
- Pertama, jalur gambar disetel ke “ src ” atribut.
- Selanjutnya nilai “ 100px ” disediakan untuk properti 'width' dan 'height' CSS.
- Juga, tetapkan nilai “ menghidupkan ' ke ' kelas ” atribut.
Langkah 2: Menyiapkan Animasi
“ keyframe ” digunakan untuk membuat animasi khusus sesuai dengan kebutuhan halaman web. Misalnya, dua animasi dibuat dalam cuplikan kode di bawah ini:
@-webkit-keyframes berputar {100 % {
mengubah: memutar ( 180 derajat ) ;
}
}
Skala @-webkit-keyframes {
100 % {
transformasi: scaleX ( 1 ) skalaY ( 1 ) ;
}
}
Dalam cuplikan kode di atas:
- Pertama, “ @-webkit-keyframes Mekanisme ' sedang digunakan untuk menyiapkan ' putaran ' Dan ' memutar ” bernama animasi.
- Selanjutnya, gunakan “ mengubah properti ” yang memiliki nilai “ memutar() ' dalam ' putaran badan animasi. Fungsi ini memutar elemen pada sudut “ 180 derajat ”.
- Setelah itu, atur animasi yang menumbuhkan atau memperluas elemen asli dengan faktor “ 1 ” di kedua “ X ' Dan ' DAN sumbu ” di “ skala badan animasi.
Langkah 3: Menerapkan Animasi pada Elemen HTML
Di dalam bagian CSS, pilih kelas “ menghidupkan ” yang ditugaskan ke “ ”, dan berikan properti CSS berikut:
posisi: absolut;
kiri: 60 %;
lebar : 110px;
tinggi : 110px;
margin: -40px 0 0 -40px;
-webkit-animation: skala 3s linier tak terbatas;
-webkit-animation: spin 2s linier tak terbatas;
}
Deskripsi properti yang digunakan dalam blok kode di atas:
- Pertama, tentukan nilai “ mutlak ' ke CSS ' posisi ' Properti. Ini menyelaraskan ' img ” sesuai dengan animasi.
- Kemudian berikan nilai “ 60% ”, “ 110px ' Dan ' 110px ' ke CSS ' kiri ”, “ lebar ' Dan ' tinggi ” properti. Properti ini digunakan untuk mengatur posisi dan ukuran elemen.
- Setelah itu atur nilai “ skala 3s linier tak terbatas ' ke ' -webkit-animasi ” Properti CSS.
- Dan “ 3 detik ” adalah durasi animasi itu, “ tak terbatas ” adalah durasi animasi, dan “ linier ” adalah arah animasi.
- Pada akhirnya, berikan nilai “ spin 2s linier tak terbatas ' ke CSS ' -webkit-animasi ' Properti. Properti ini menambahkan animasi kedua bernama “ putaran ' pada ' img ” elemen.
Setelah kompilasi blok kode di atas, animasinya terlihat seperti ini:
GIF di atas mengilustrasikan bahwa hanya “ putaran ” animasi diputar pada elemen yang ditargetkan.
Langkah 4: Memutar Banyak Animasi pada Elemen HTML
Seperti pada langkah di atas, hanya satu animasi yang diterapkan pada elemen. Ini karena beberapa nilai telah ditetapkan ke “ -webkit-animasi ' Properti.
Untuk mengatasi masalah ini, bungkus elemen target dengan elemen HTML lain. Sebagai “ div ” sudah digunakan sebagai pembungkus pada langkah pertama, pilih “ menjangkau ” dan perbarui kode seperti:
.menghidupkan {posisi: absolut;
kiri: 60 %;
lebar : 110px;
tinggi : 110px;
margin: -40px 0 0 -40px;
-webkit-animation: skala 3s linier tak terbatas;
}
. menjangkau {
posisi: relatif;
atas: 160px;
-webkit-animation: spin 2s linier tak terbatas;
}
Dalam kode di atas:
- Pada awalnya, “ menghidupkan ” kelas tetap sama dan hanya animasi kedua yang dihapus darinya yang ditempatkan di “ menjangkau ' kelas.
- Setelah itu atur posisi dengan menggunakan tombol “ posisi ' Dan ' atas ” properti.
Setelah eksekusi potongan kode di atas, halaman web sekarang muncul seperti ini:
Keluarannya menunjukkan bahwa kedua animasi telah diterapkan ke elemen HTML yang dipilih secara bersamaan.
Kesimpulan
Untuk menerapkan beberapa properti CSS, bungkus elemen dengan elemen HTML dan terapkan animasi padanya sehingga setiap elemen HTML menyimpan satu animasi. Karena properti anak mewarisi animasi yang diterapkan pada elemen HTML induk, banyak animasi diterapkan tanpa menyebabkan kesalahan atau ambiguitas untuk kompiler. Itulah tata cara memainkan/menambahkan lebih dari satu animasi CSS sekaligus.