Bahasa HTML menyediakan struktur halaman web, dan CSS menyediakan desain dan pemformatan aplikasi tersebut. Kombinasi ini juga memungkinkan Anda menambahkan animasi, karena elemen animasi terlihat lebih menarik dibandingkan dengan elemen statis. Itu juga memungkinkan elemen mengubah gayanya secara bertahap.
Artikel ini akan memandu bagaimana kita dapat menerapkan animasi ke elemen. Jadi, mari kita mulai!
Apa itu Keyframes Animasi CSS?
Untuk menyelesaikan animasi, kita harus mengikat animasi ke elemen HTML. Untuk tujuan ini, gunakan kata kunci “ @keyframe ” diikuti dengan nama animasi. Komponen ini menentukan awal dan akhir animasi.
Bagaimana Cara Mengatur Bingkai Utama Animasi CSS?
Untuk menyiapkan keyframe animasi di CSS, kita akan melihat dua contoh.
Contoh 1
Untuk menyiapkan keyframe animasi di CSS, lakukan langkah-langkah berikut:
-
- Tambahkan yang memiliki nama kelas “ main-div ”.
- Di dalam div, tambahkan div lain dengan nama class “ img-peng ”.
- Di dalam div img-peng ini, tambahkan
untuk menempatkan gambar. Tag ini memiliki tiga atribut, yaitu “ src ” untuk menyediakan jalur gambar, “ semuanya ” adalah teks alternatif yang ditambahkan jika gambar tidak ditampilkan, dan tombol “ lebar ” atribut untuk memberikan lebar gambar.
HTML
< div kelas = 'div utama' >
< div kelas = 'img-peng' >
< img src = 'gambar/penguin.png' semuanya = 'pinguin' lebar = '100' >
div >
div >
.main-div {
CSS
lebar: 90 % ;
tinggi: 90px;
warna latar belakang: rgb ( 67 , 66 , 87 ) ;
margin: 20px otomatis;
padding: 10px;
}
Di CSS, ' .main-div ” ditambahkan untuk mengakses kelas div. Properti yang diterapkan padanya dijelaskan di bawah ini:-
- “ lebar ” nilai properti menentukan lebar div.
- “ tinggi ” properti digunakan untuk mengatur ketinggian div.
- “ warna latar belakang ” properti menerapkan warna ke latar belakang elemen.
- “ batas ” ditetapkan sebagai “ mobil 20px ”, yang menunjukkan ruang dari atas dan bawah, dan otomatis berarti ruang yang sama dari kiri dan kanan.
- “ lapisan ” nilai properti ditetapkan sebagai 10px, yang menerapkan ruang di sekitar konten elemen.
Gaya kelas img-peng
.img-peng {
lebar: 50px;
tinggi: 100px;
posisi: relatif;
animasi: goyang;
durasi animasi: 2 detik;
animasi-waktu-fungsi: 2s;
hitungan animasi-iterasi: tak terbatas;
}
“ .img-peng ” digunakan untuk mengakses kelas div, yang disebutkan dalam file HTML di atas. Elemen div ini ditata dengan properti yang dibahas di bawah ini:-
- “ lebar ” Nilai properti digunakan untuk mengatur lebar elemen.
- “ tinggi ” Nilai properti digunakan untuk mengatur ketinggian elemen.
- “ posisi ” properti diberi nilai “ relatif ”, yang artinya akan diposisikan relatif terhadap posisi normalnya.
- “ animasi ” nama diberikan sebagai “ menggoyang ”. Namun, Anda dapat memberi nama animasi sesuai kebutuhan.
- “ durasi animasi ” mewakili durasi animasi, yaitu 2 detik.
- “ animasi-waktu-fungsi ” diberi nilai 2s yang artinya dalam 2 detik, animasi selesai.
- “ animasi-iterasi-jumlah ” diatur sebagai tidak terbatas, yang berarti animasi ini akan terjadi dalam waktu yang tidak terbatas.
Tentukan @keyframes Dengan ke dan dari kata kunci
@ bingkai kunci bergetar {
dari {
atas: 50px;
}
ke {
margin-bawah: 200px;
}
}
Deskripsi bingkai kunci animasi yang diatur ke gambar tercantum di bawah ini:-
- “ @keyframes goyang ” mengacu pada nama animasi goyang diikuti dengan kata kunci @keyframes. Dalam aturan ini, perilaku animasi ditentukan.
- Di dalam tanda kurung kurawalnya, “ dari ' dan ' ke ” kata kunci menentukan interval yang berbeda untuk menentukan perilaku animasi.
- “ atas ” diberi nilai 50px, yang berarti animasi dimulai dari 50px dari bagian atas layar dan berlanjut ke 200px di bagian bawah.
Hasilnya, Anda akan melihat output berikut:
Sekarang, biarkan animasi berperilaku berbeda pada interval yang berbeda. Untuk melakukannya, gunakan persentase animasi di @keyframes.Tentukan @keyframes Dengan Persentase
@ bingkai kunci bergetar {
0 % {
kiri: -50px ;
}
25 % {
kiri: 50px;
}
lima puluh % {
kiri: -25px ;
}
75 % {
kiri: 25px;
}
100 % {
kiri: 10px;
}
}
Jadi, deskripsi potongan kode di atas disebutkan di sini:-
- Nilai persentase 0%, 25%, 50%, 75%, dan 100% mewakili animasi pada interval yang berbeda.
- Selain itu, pada 0%, ruang di sebelah kiri gambar akan menjadi “ -50px ”. Pada 25%, ruang di sebelah kiri akan menjadi “ 50px ”. Pada 50%, ruang di sebelah kiri akan menjadi “ -25px ”. Pada 75%, ruang kiri akan menjadi “ 25px ”, dan saat animasi selesai (100%), ruang kiri akan menjadi “ 10px ”.
Kode di atas menampilkan animasi berikut:
Mari kita ambil contoh lain untuk melihat bagaimana kita dapat mengatur animasi ke gambar.Contoh 2
Dalam HTML, tambahkan
dengan nama kelas “ halaman Utama ”. Di dalam elemenini, tempatkan dua tag div lagi dengan class “ awan1 ' dan ' awan2 ”, masing-masing.HTML
< div kelas = 'halaman Utama' >
< div kelas = 'awan1' > div >
< div kelas = 'awan2' > div >
div >
tubuh {
CSS
batas: 0 ;
lapisan: 0 ;
}
Di CSS, kami akan menetapkan properti CSS berikut ke elemen body:-
- “ batas ” properti sebagai 0 tidak menentukan ruang di sekitar elemen.
- “ lapisan ” properti dengan nilai 0 tidak menentukan ruang di sekitar konten elemen.
Gaya div halaman utama
.halaman Utama {
background-image: url ( / gambar-gambar / serigala-malam.png ) ;
background-repeat: no-repeat;
background-size: cover;
tinggi: 100vh;
posisi: relatif;
luapan: tersembunyi;
}
Di Sini:-
- “ .halaman Utama ” digunakan untuk mengakses kelas div.
- “ gambar latar belakang ” properti diberi nilai “ url(/images/serigala-malam.png) ” di mana gambar adalah folder yang berisi gambar serigala-malam.png.
- “ background-repeat ” properti diberi nilai “ no-repeat , yang berarti gambar akan ditampilkan satu kali.
- “ background-size ” ditetapkan sebagai “ menutupi ” untuk mengisi seluruh elemen div.
- “ tinggi ” adalah 100vh yang merupakan 100% dari tinggi viewport.
- “ posisi ” sebagai relatif mengatur posisi gambar relatif terhadap lokasinya saat ini.
- “ meluap ” nilai properti disetel sebagai tersembunyi untuk menyembunyikan bagian gambar yang terlalu besar untuk muat ke dalam wadah.
Gaya kelas cloud1
.cloud1 {
background-image: url ( / gambar-gambar / cloud.png ) ;
ukuran latar belakang: berisi;
background-repeat: no-repeat;
posisi: mutlak;
atas: 100px;
lebar: 500px;
tinggi: 300px;
animasi: cloudanimation1;
durasi animasi: 70-an;
hitungan animasi-iterasi: tak terbatas;
}
Kelas div cloud1 diterapkan dengan properti yang dijelaskan berikut ini:-
- “ .cloud1 ” digunakan untuk mengakses div class cloud1.
- “ gambar latar belakang ” diatur sebagai url(/images/cloud.png), di mana gambar adalah folder yang berisi gambar cloud.png.
- “ background-size ” dengan nilai “ berisi ” memastikan visibilitas gambar.
- “ background-repeat ” properti dengan nilai ditetapkan sebagai “ no-repeat ” menampilkan gambar sebagai tidak berulang.
- “ posisi ” sebagai posisi absolut gambar relatif terhadap elemen induknya.
- “ atas ” menyetel gambar pada 100px dari atas.
- “ lebar ” digunakan untuk mengatur lebar elemen div menjadi 500px.
- “ tinggi ” digunakan untuk mengatur tinggi elemen div menjadi 300px.
- “ animasi ” diberi nama cloudanimation1.
- “ durasi animasi ” mewakili durasi animasi, yaitu 70 detik.
- “ animasi-iterasi-jumlah ” diberi nilai infinite, yang akan mengiterasi animasi berkali-kali.
Sejauh ini, kami telah menerapkan properti CSS ke halaman utama kelas div dan cloud1. Sekarang, di bagian selanjutnya, kita akan memberi style pada kelas div berikutnya bernama cloud2.
Gaya kelas cloud2
.cloud2 {
background-image: url ( / gambar-gambar / cloud.png ) ;
ukuran latar belakang: berisi;
background-repeat: no-repeat;
posisi: mutlak;
atas: 50px;
lebar: 200px;
tinggi: 300px;
animasi: cloudanimation2;
durasi animasi: 15 detik;
hitungan animasi-iterasi: tak terbatas;
}
Kelas div cloud2 diterapkan dengan properti yang dijelaskan di bawah ini:-
- “ .cloud2 ” digunakan untuk mengakses kelas cloud2.
- “ gambar latar belakang ” diatur sebagai url(/images/cloud.png), di mana image adalah folder yang berisi image cloud.png.
- “ background-size ” berisi nilai memastikan visibilitas gambar.
- “ background-repeat ” properti dengan nilai yang ditetapkan sebagai no-repeat menampilkan gambar sebagai non-repeat.
- “ posisi ” sebagai posisi absolut gambar relatif terhadap elemen induknya.
- “ atas ” menyetel gambar pada 100px dari atas.
- “ lebar ” properti digunakan untuk mengatur lebar elemen div.
- “ tinggi ” properti digunakan untuk mengatur ketinggian elemen div.
- “ animasi ” diberi nama cloudanimation2.
- “ durasi animasi ” mewakili durasi animasi.
- “ animasi-iterasi-jumlah ” diberi nilai infinite, yang akan mengiterasi animasi berkali-kali.
Tentukan @keyframes untuk cloudanimation1
@ keyframes cloudanimation1 {
ke {
kiri: 0px;
}
dari {
kiri: 100 % ;
}
}
Div cloud1 terikat dengan animasi yang dijelaskan di bawah ini:-
- “ @keyframes cloudanimation1 ” nama animasi cloudanimation1 diikuti dengan kata kunci @keyframes yang digunakan untuk menentukan transisi.
- Kata kunci @keyframes menentukan bagaimana animasi dilakukan dari awal hingga akhir pada gambar cloud.
- “ ke ' dan ' dari ” kata kunci menentukan cloud1 akan berpindah dari 100% ke 0px layar.
Tentukan @keyframes untuk cloudanimation2
@ keyframes cloudanimation2 {
0 % {
kiri: 0 % ;
}
100 % {
kiri: 100 % ;
}
}
Kelas div cloud2 dikaitkan dengan animasi yang dijelaskan di bawah ini:-
- “ @keyframes cloudanimation2 ” mewakili nama animasi cloudanimation2 diikuti dengan kata kunci @keyframes yang digunakan untuk menentukan animasi.
- “ 0% ' dan ' 100% ” mewakili awal dan akhir animasi.
- Pada 0% animasi, awan akan berada di sebelah kiri dengan nilai ditetapkan sebagai 0%, dan secara bertahap akan berpindah ke lebar 100%.
Keluaran
Itu keren! Kami telah membahas bagaimana kami dapat menentukan animasi ke elemen menggunakan kata kunci @keyframes dengan sukses.Kesimpulan
CSS mengizinkan kita untuk menerapkan gaya ke elemen HTML. Animasi dalam CSS melakukan transisi dari satu gaya ke gaya lainnya. Ini terdiri dari dua komponen, gaya animasi, dan keyframes. Gaya animasi mewakili properti yang berbeda seperti namanya, durasi animasi, hitungan iterasi animasi, dan banyak lagi. Sedangkan komponen keyframe mendefinisikan awal dan akhir animasi. Panduan ini menguraikan tentang cara menyiapkan keyframe animasi dengan contoh.
- Tambahkan