Menerapkan Animasi Lanjutan dengan CSS Keyframes

Anda dapat menggunakan CSS Keyframes untuk menerapkan animasi lanjutan pada elemen HTML. Dengan menggunakan Keyframes, Anda dapat mengontrol perubahan properti CSS selama animasi berlangsung. Berikut adalah langkah-langkah untuk menerapkan animasi dengan CSS Keyframes:

1. Membuat Animasi Keyframes:
   Buat animasi keyframes dengan menggunakan aturan @keyframes di CSS. Dalam aturan ini, Anda akan mendefinisikan langkah-langkah perubahan properti CSS selama animasi berlangsung. Misalnya, Anda dapat membuat animasi yang mengubah posisi dan skala elemen dari awal hingga akhir animasi. Contoh:

   @keyframes nama-animasi {
     0% {
       /* Properti CSS pada awal animasi */
     }
     50% {
       /* Properti CSS pada setengah animasi */
     }
     100% {
       /* Properti CSS pada akhir animasi */
     }
   }

2. Mengaplikasikan Animasi ke Elemen:
   Pilih elemen HTML yang ingin Anda animasikan, dan terapkan animasi dengan menggunakan properti animation di CSS. Tentukan nama animasi yang telah Anda buat dalam aturan @keyframes, durasi animasi, jenis pengulangan, dan fungsi timing (percepatan). Contoh:

   .element-animasi {
     animation: nama-animasi 2s infinite ease-in-out;
   }

Pada contoh di atas, animasi dengan nama “nama-animasi” akan diterapkan pada elemen dengan kelas “element-animasi”. Animasi akan berlangsung selama 2 detik, diulang secara terus-menerus (infinite), dan menggunakan fungsi timing ease-in-out (percepatan dan perlambatan yang halus).

3. Menentukan Properti Animasi dalam Keyframes:
   Dalam aturan keyframes, tentukan perubahan properti CSS pada setiap langkah animasi. Anda dapat menggunakan persentase (0% hingga 100%) atau kata kunci khusus seperti “from” (0%) dan “to” (100%) untuk menentukan langkah-langkah perubahan properti. Contoh:

   @keyframes nama-animasi {
     0% {
       transform: translateX(0);
     }
     50% {
       transform: translateX(100px);
     }
     100% {
       transform: translateX(0);
     }
   }

Dalam contoh di atas, animasi akan mengubah posisi elemen dari posisi awal ke kanan sejauh 100 piksel pada 50% animasi, kemudian kembali ke posisi awal pada akhir animasi.

Anda dapat menyesuaikan perubahan properti, durasi, jenis pengulangan, dan fungsi timing sesuai dengan kebutuhan Anda. Dengan menggunakan CSS Keyframes, Anda dapat menciptakan animasi yang kompleks dan menarik untuk meningkatkan pengalaman pengguna pada halaman web Anda.