Pengertian Dan Penggunaan @keyframes pada CSS.

Mengenal fungsi @keyframes

Mungkin dalam media lain animasi dapat dibuat dalam bentuk video maupun gif. Namun bagaimana jika ingin menampilkannya di website? untuk Membuat Spinner Loading mungkin. Nah kali ini saya akan membahas tentang @keyframes.

Nah @keyframes digunakan untuk menampilkan animasi pada website. Biasanya disematkan didalam syntax CSS yang berada dalam syntax HTML. Jadi jika kamu ingin membuat animasi pada website kamu maka @Keyframes ini lah yang mengatur pergerakan dan jalannya animasi kamu.

@keyframes ini dapat dieksekusi di web browser seperti Mozilla, Chrome dll. Sedangkan pada Opera masih belum optimal dalam pengeksekusiannya.

Adapun penulisan @keyframes adalah sebagai Berikut :

@keyframes nama_animasi{
selector_keyframe {style_css;}
}

Contoh penulisan :

@keyframes spin{
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

Keterangan :
spin : Nama animasi sebagai penanda kita.
x%  : Persentasi durasi animasi (0% - 100%)
{...} : Perintah yang ingin di eksekusi.

Untuk mempelajari lebih lanjut mengenai animasi dan @keyframes silahkan  KUNJUNGI DISINI.