CSS @Keyframes

Tahukah Kamu?

Dengan menggunakan CSS kita dapat membuat animasi untuk aplikasi website, animasi merupakan konsep untuk merubah style elemen secara bertahap ke set style yang lain.

Di CSS ada rule yang dapat digunakan untuk membuat animasi, yaitu @keyframes. Dengan @keyframes kamu dapat menentukan kapan terjadinya perubahan style.

Mari kita coba membuat animasi perubahan warna background menggunakan @keyframes.

body {
    background-color: yellowgreen;
    animation: henshin 5s infinite;
}

@keyframes henshin {
    0% { background-color: blueviolet; }
    50% { background-color: yellowgreen; }
    100% { background-color: blueviolet; }
}

Penjelasan

Kita membuat sebuah @keyframes dengan nama henshin, @keyframes tersebut dijalankan terus menerus setiap 5 detik, dan pada waktu tertentu dalam 5 detik tersebut akan terjadi perubahan style, dimana pada detik ke 0 (5*0%) background akan berwarna blueviolet -> detik ke 2,5(5*50%) akan berwarna yellowgreen -> dan detik ke 5(5*100%) akan berwarna blueviolet.

Hasilnya