MEMBUAT ANIMASI LOADING DENGAN CSS

Halo temen-temen. Pada blog ini saya akan menshare pengetahuan saya tentang animasi pada css. Sebelum membuat animasi dengan css. Kita harus tau dulu apa itu @keyframes.
@keyframes adalah fungsi baru untuk mendefinisikan animasi pada sebuah element. Untuk membuat animasi pada sebuah element/class/tag pada html kita harus memberikan nama animasi terlebih dahulu pada pada bagian element/class/tag pada html tersebut. bingung ? langsung saja perhatikan contoh berikut ini:

.namaclass{
animation: namaanimasi duration gerakananimasi mode;
}
@keyframes namaanimasi{
aksi yang diinginkan;
}

atau bisa juga dengan cara berikut ini:

.namaclass{
animation-name: namaanimasi;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
@keyframes namaanimasi{
aksi yang diinginkan;
}

atau lebih jelasnya bisa dilihat pada contoh gambar dibawah ini:
itulah beberapa penjelasan singkat mengenai @keyframes untuk animasi pada CSS. Langkah selanjutnya kita akan langsung membuat sebuah animasi loading dengan penjelasan diatas tersebut. Mari kita mulai!.
Langkah 1 kita buat dulu file html (nama filenya terserah anda) seperti pada gambar dibawah ini:

Langkah 2 kita buat file css seperti pada gambar dibawah ini:

hasilnya dapat dilihat pada codepen dibawah ini:

See the Pen animasi by ifan sutiono (@ifansz) on CodePen.

Sekian tutorial dari saya kurang lebihnya mohon maaf. Bila masih ada yang kurang jelas silahkan isikan kebingungan kalian di kolom komentar.
Referensi:

• malas ngoding
• codepen