CSS animasi sangat mirip dengan CSS transisi, Ini adalah salah satu sintaks CSS3 spesial untuk menciptakan efek animasi secara otomatis, @keyframe adalah tahapan-tahapan yang merangkai timeline pada animasi atau objek yang kita tentukan, dengan keyframe kita dapat mengatur tahapan-tahapan dengan style yang berbeda-beda setiap tahapan sesuai keinginan kita,

Oke langsung saja kita praktek, pada artikel kali ini kita akan buat efek transisi atau perubahan warna dengan menggunakan fungsi @keyframe.

Pertama teman-teman buat sebuah file html, dan ketikan script berikut:

Capture

Lalu teman-teman ketikan script berikut untuk mengatur perubahan warna pada elemenkotak yang kita buat :

Capture1

Hasilnya akan sama ketika kita menggunakan transisi jadi teman teman bisa mengatur kapan perubahan warna pada element yang teman-teman inginkan , pada contoh ini saya memberi nama keyframe saya dengan nama keyname, dan memberikan efek infinite yang berarti akan terus menerus mengalami perubahan tanpa berhenti,sesuai dengan tahapan yang kita telah tentukan,

Semoga cukup jelas ,selamat mencoba 🙂