DEV Community

Sulton
Sulton

Posted on

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; }
}
Enter fullscreen mode Exit fullscreen mode

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

Image description

Top comments (0)