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.