Setelah sekian lama mengeksplor beberapa framework yang ada (cuman nyicip aja sih), akhirnya mencoba balik lagi buat belajar tentang fundamental HTML; CSS, dan JavaScript.

Kemudian memutuskan untuk membuat sebuah aplikasi web sederhana yang bernama Tap Music dengan berpatokan pada salah satu repositorinya mas Simo Edwin yang ini.

Ketika membangun aplikasi tersebut, saya penasaran dengan animasi yang dibuat. Yaah, karena memang saya baru tahu bagian kulitnya CSS. Jadi saya dibuat kagum dengan animasi yang dibuat hanya dengan menggunakan CSS. Bikinnya pake apa ya?

Setelah bongkar dan ngoprek reponya mas Simo Edwin yang ini, akhirnya ketemu kalo bikinnya itu pake CSS Keyframes.

Mungkin teman-teman lebih tau daripada saya tentang ini. Tapi saya pengen sedikit berbagi tentang apa yang saya dapat dari bermain dengan CSS Keyframe ini.

Sebelumnya kalian pasti udah tau dong tentang CSS. Iya, jadi CSS itu digunakan untuk mengatur tampilan pada setiap elemen HTML yang ada di aplikasi web. Seperti mengatur warna, ukuran, jenis font yang digunakan dan masih banyak lagi yang lainnya.

Dan keyframe ini adalah bagian dari CSS Animation yang digunakan untuk mengatur nilai pada animating properties di point yang berbeda-beda selama animasi tersebut berjalan.

Keyframe ini menentukan tingkah laku dan perubahan properti dari objek dalam satu siklus animasi, misalnya arah pergerakan objek pada animasi dan perubahan warna dan bentuk.

Langsung aja ke contohnya yak.

Disini saya bakal buat animasi bola yang memantul disepanjang sudut layar browser. Yang nantinya juga akan berganti warna. Jadi hal pertama yang saya lakukan adalah dengan membuat sebuah file html.

Kemudian saya menambahkan sebuah tag div baru untuk membuat objek bola nya.

<body class="badan">
  <div class="bola"></div>
</body>

Lalu selanjutnya adalah waktunya styling dengan CSS. Kali ini saya menggunakan internal-css, atau saya menuliskan style CSS-nya di dalam file htmlnya langsung. Pertama, saya membuat tag style di dalam tag head.

Lalu saya menambahkan style untuk si bolanya. Berupa ukuran bola, warna, border-radius, posisi bola, dan tentunya animasi si bola tersebut. Dan merubah warna background menjadi sedikit lebih gelap.

.bola {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: cyan;
  position: absolute;
  bottom: 0px;
  left: 0px;
  animation: bouncingBall 5s infinite;
}

.badan {
  background: grey;
}

Nah pada bagian animation itu ada bouncingBall, apa itu?

Yak, itu adalah nama dari animasi yang akan dibuat dengan keyframe pada baris selanjutnya. Dan durasi selama satu siklus animasi adalah 5s yang akan terus berulang-ulang siklusnya (Infinite).

Selanjutnya saya membuat keyframe animasinya.

@keyframes bouncingBall {
  0%   { bottom: 0%; left: 0% }
  6%   { bottom: 20%; left: 20% }
  12%  { bottom: 0%; left: 40% }
  18%  { bottom: 20%; left: 60% }
  24%  { bottom: 0%; left: 80% }
  30%  { bottom: 20%; left: 92% }
  36%  { bottom: 40%; left: 80% }
  42%  { bottom: 60%; left: 92% }
  48%  { bottom: 86%; left: 80% }
  54%  { bottom: 66%; left: 60% }
  60%  { bottom: 86%; left: 40% }
  66%  { bottom: 66%; left: 20% }
  72%  { bottom: 86%; left: 0% }
  78%  { bottom: 60%; left: 10% }
  82%  { bottom: 40%; left: 0% }
  88%  { bottom: 20%; left: 10% }
  100% { bottom: 0%; left: 0%; background: darkblue }
}

Menuliskan CSS Syntax untuk keyframe berdasarkan dari sumber ini. Diawali dengan menuliskan anotasi @keyframe lalu dilanjutkan dengan menuliskan animation name. 0% sampai 100% di dalam blok keyframe adalah keyframe-selector yang menunjukkan persentase dari durasi animasi.

Dan menuliskan css-styles untuk membuat animasinya seperti perubahan lokasi objek dan perubahan warnanya.

Yang kemudian hasilnya menjadi seperti ini.

Nah itu tadi sedikit tentang CSS Keyframes, semoga bisa membantu mengingat kembali masa lalu yang kelam tentang salah satu ilmu yang ada di CSS.

Thanks for stopping by!