Cara Membuat Animasi Keyframe CSS

CSS memberi pengembang kemampuan untuk menghidupkan halaman web mereka menggunakan animasi keyframes.

Animasi CSS dicapai dengan mengubah status awal elemen HTML melalui berbagai propertinya. Beberapa properti CSS umum yang dapat dianimasikan meliputi:

cara memindahkan folder dari satu google drive ke yang lain

Lebar
Tinggi
Posisi
Warna
Kegelapan

Properti CSS umum ini dimanipulasi oleh elemen CSS tertentu untuk membuat hasil yang diinginkan. Jika Anda pernah menemukan elemen animasi di halaman web, kemungkinan besar elemen tersebut dianimasikan menggunakan animasi keyframes.

Apa itu Elemen Keyframes?

NS elemen bingkai utama dapat digunakan pada satu atau lebih elemen HTML yang dapat diaksesnya. Ini mengidentifikasi titik tertentu dalam keadaan elemen dan menentukan penampilan yang harus dimiliki elemen ini saat ini.

Ini mungkin terdengar seperti banyak untuk dicerna, tetapi sebenarnya cukup sederhana. NS elemen bingkai utama memiliki struktur yang cukup sederhana yang dapat dengan mudah dipahami dan disesuaikan agar sesuai dengan persyaratan animasi apa pun.

Contoh Struktur Keyframe

  
@keyframes identifier {  
from{  
/* where you would like the animation to start from. */  
}  
to{  
/* where you would like the animation to end up */  
}  
}

Katakanlah Anda ingin menganimasikan tombol persegi panjang hijau dengan mengubahnya menjadi tombol bulat biru.

Dalam parameter dari bagian di atas Anda harus menempatkan semua gaya yang diperlukan agar elemen terlihat seperti tombol persegi panjang hijau, lalu di ke bagian, Anda akan menempatkan semua persyaratan gaya untuk mengubah tombol ini menjadi tombol bulat biru.

Jika Anda berpikir, itu tidak terdengar seperti animasi. Nah, itu karena komponen kunci dari keseluruhan proses ini belum diperkenalkan --- komponen ini adalah properti animasi.

Properti Animasi

NS properti animasi memiliki satu set sub-properti yang berbeda; ini digunakan dalam kombinasi dengan struktur keyframe di atas untuk menganimasikan elemen HTML yang diinginkan.

Namun, Anda hanya perlu mengetahui lima dari sub-properti ini dan nilai yang terkait dengannya, untuk mencapai animasi dalam proyek Anda. Sifat-sifat ini dikenal sebagai:

Nama-animasi
Animasi-durasi
Fungsi waktu animasi
Penundaan animasi
Animasi-iterasi-hitung

Menggunakan Animasi di Halaman Web

Menggunakan skenario di atas, tujuannya adalah untuk membuat tombol animasi.

Contoh Animasi Tombol

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color:white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation-name: clickButton;  
animation-duration: 5s;  
animation-delay: 4s;  
animation-iteration-count:infinite;  
animation-timing-function: ease-in-out;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  
  
Click!

Bagian animasi dari kode di atas berisi lima sub-properti yang disebutkan sebelumnya. Setiap properti memiliki fungsi yang sangat berbeda dan bersama-sama mereka bekerja untuk menganimasikan elemen HTML apa pun yang menjadi target mereka.

Terkait: Cara Menargetkan Bagian dari Halaman Web Menggunakan Pemilih CSS

Properti Nama Animasi

Properti ini adalah satu-satunya properti terpenting dalam daftar. Tanpa properti nama-animasi , Anda tidak akan memiliki pengenal untuk melewati ke elemen bingkai utama , membuat semua kode dalam parameternya tidak berguna.

Jika Anda lupa memasukkan satu atau dua sub-properti lainnya, Anda mungkin masih memiliki animasi yang cukup baik. Namun, jika Anda lupa properti nama-animasi Anda tidak akan memiliki animasi.

Properti Durasi Animasi

Properti ini digunakan untuk menentukan jumlah waktu yang harus diambil oleh elemen animasi saat bertransisi dari satu status ke status berikutnya.

Pada contoh di atas, properti durasi animasi diatur ke 5 detik (5 detik), sehingga tombol persegi panjang hijau akan memiliki total 5 detik sebelum sepenuhnya menjadi tombol bulat biru.

Properti Penundaan Animasi

Properti ini penting karena satu alasan; beberapa halaman web mungkin memerlukan waktu beberapa detik untuk dimuat sepenuhnya (karena beberapa faktor berbeda). Sehingga properti penundaan animasi mencegah animasi untuk segera dimulai untuk berjaga-jaga jika halaman web membutuhkan waktu untuk dimuat.

Pada contoh di atas, properti penundaan animasi diatur ke 4s, yang berarti bahwa animasi tidak akan dimulai sampai 4 detik setelah halaman web dikunjungi (memberikan waktu yang cukup untuk memuat halaman web sebelum animasi dimulai).

Properti Animasi-iterasi-hitung

Properti ini menyatakan berapa kali elemen animasi harus bertransisi dari satu status ke status berikutnya. NS properti animasi-iterasi-hitung mengambil nilai yang berupa kata dan angka. Nilai angka bisa apa saja dari 1 ke atas, sedangkan nilai kata biasanya tak terbatas .

Pada contoh di atas, nilai animasi-iterasi-hitung diatur ke tak terbatas , yang berarti bahwa selama halaman web aktif, properti tombol akan bergerak dari satu status ke status berikutnya, secara terus-menerus.

Properti Fungsi Waktu Animasi

Properti ini menentukan gerakan elemen animasi saat transisi dari satu keadaan ke keadaan berikutnya. NS properti fungsi waktu animasi biasanya diberikan salah satu dari tiga nilai kemudahan.

Mudah-in
santai
Mudah-masuk-keluar

NS nilai kemudahan masuk digunakan di atas; ini secara perlahan mentransisikan animasi dari satu keadaan ke keadaan lainnya. Jika tujuannya adalah untuk membuat transisi lambat saat tombol berubah dari persegi panjang hijau menjadi lingkaran biru, Anda akan menggunakan nilai kemudahan . Jika Anda hanya menginginkan transisi lambat ke arah yang berlawanan, Anda akan menggunakan nilai kemudahan .

Mengurangi Kode Kami

Dalam kebanyakan kasus, mengurangi panjang program dilihat sebagai pendekatan praktis. Ini terutama karena lebih sedikit baris kode mengurangi kemungkinan kesalahan yang tidak diketahui dalam program Anda.

Kode di atas dapat dikurangi dengan empat baris. Ini dapat dicapai hanya dengan menggunakan properti animasi tanpa secara eksplisit mengidentifikasi setiap sub-propertinya.

Mengurangi Kode untuk Contoh Animasi Tombol

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color: white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation: clickButton 5s ease-in-out 4s infinite;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  

				
				
				Kategori				 Pemrograman