CSS: Animasi perubahan style dengan css transition

Terkadang di suatu bagian di halaman web kita ingin melakukan perubahan style saat user melakukan aksi tertentu. Semisal saat user melakukan mouseover disalah satu elemen kita ingin elemen tersebut berubah warna.

Akan tetapi terkadang transisi yang kita lakukan berjalan secara kaku

Kita dapat mengakali hal ini dengan css transition, element akan otomatis ditransisikan sesuai style yang diaplikasikan

Sekarang kita coba menambahkan

transition: background-color 2s ease-out;

maka elemen kita akan menjadi

Ini juga digunakan untuk bermacam transisi, misal kita ingin mengubah width dengan mulus, bisa juga menggunakan cara ini. Untuk efek kecepatan transisi pun ada macam macam, mulai dari linear, ease-in, ease-out, dsb.

Silahkan dicoba.

Leave a Reply

%d bloggers like this: