Hallo teman – teman jumpa lagi dalam artikel saya kali ini, pada pembahasan kali ini saya akan membahas tentang Cara Membikin Animasi Berulang Menggunakan @keyframes. Membuat website tanpa animasi itu seperti ada yang kurang hampa rasanya. Nah pada artikel kali ini saya akan mengajari teman – teman tentang cara pembuatan animasi sederhana menggunakan yang namanya @keyframes.

seiring perkembangan teknologi website yang meningkat pesat saat ini maka banyak sekali animasi – animasi yang muncul dari HTML dan CSS3, namun animasi – animasi yang diciptakan melalui HTML dan CSS3 tidak secantik kalau kita menggunakan javascript jquery, kenapa begitu karena javascript jquery memang lebih diperuntukkan untuk efek – efek animasi di website. Oke pada kesempatan kali ini saya akan memberikan aniamsi dengan HTML dan CSS3 berupa gambar kotak yang berputar dengan perubahan bentuk.

Oke langsung saja seperti biasa, kita langsung praktekkan silahkan teman – teman siapkan text editornya. Kalau sudah buat text HTMl seperti di bawah ini:

Oke pada HTML di atas kita membuat sebuah elemen div dengan bernamakan kelas kotak, nah nantinya elemen div yang bernama kotak inilah yang akan kita buat animasi kotak berputar dengan warna yang berbeda – beda. Oke next, kita buat CSS untuk kelask kotak dan kita berikan efek – efek animasinya, langsung saja silahkan ikuti langkah – langkah di bawah ini:

Oke kalau sudah silahkan teman – teman save dan jalankan pada browsernya, untuk lebih jelasnya silahkan lihat di demo .

Oke semoga bermanfaat.