Cara Membuat Animasi Keyframe Menggunakan CSS

Cara Membuat Animasi Keyframe Menggunakan 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:

  • Width
  • Height
  • Position
  • Color
  • Opacity

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 Keyframe?

elemen keyframes 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. Elemen keyframes 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 perlu menempatkan semua gaya yang diperlukan agar elemen terlihat seperti tombol persegi panjang hijau, kemudian di bagian ke, Anda akan menempatkan semua persyaratan gaya untuk mengubah tombol ini menjadi tombol bulat biru. .

Jika Anda berpikir, “that doesn’t sound too much like animation”. Nah, itu karena komponen kunci dari keseluruhan proses ini belum diperkenalkan — komponen ini adalah properti animasi.

Properti Animasi

Properti animasi memiliki sekumpulan 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:

  • Animation-name
  • Animation-duration
  • Animation-timing-function
  • Animation-delay
  • Animation-iteration-count

Cara Membuat Animasi Keyframe Menggunakan CSS

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

Contoh Animasi Tombol

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* 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;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>

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.

Properti Nama Animasi

Properti ini adalah satu-satunya properti terpenting dalam daftar. Tanpa properti animation-name, Anda tidak akan memiliki pengidentifikasi untuk melewati elemen keyframes, membuat semua kode dalam parameternya menjadi 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

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

Dalam 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). Jadi properti animation-delay mencegah animasi untuk segera dimulai untuk berjaga-jaga jika halaman web membutuhkan waktu untuk dimuat.

Pada contoh di atas, properti animation-delay diatur ke 4s, yang berarti animasi tidak akan dimulai hingga 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. Properti animation-iteration-count mengambil nilai berupa kata dan angka. Nilai angka bisa apa saja dari 1 ke atas, sedangkan nilai kata biasanya “tak terbatas”.

Pada contoh di atas, nilai animation-iteration-count diatur ke “infinite”, yang berarti bahwa selama halaman web aktif, properti button akan bergerak dari satu status ke status berikutnya, terus menerus.

Properti Fungsi Waktu Animasi

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

  • Ease-in
  • Ease-out
  • Ease-in-out

Nilai kemudahan masuk digunakan di atas; ini perlahan-lahan 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 ease-out.

1 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like