Belajar CSS: CSS Transition

Apa itu CSS Transition?

CSS Transition merupakan cara yang paling mudah untuk membuat animasi pada CSS. CSS Transition akan memulai animasi saat suatu properti (yang telah ditentukan) pada CSS berubah.

Kita dapat menambahkan CSS Transition dengan properti berikut:

• transition-property, properti yang digunakan
• transition-duration, durasi animasi
• transition-timing-function, timing function yang akan digunakan
• transition-delay, jeda waktu sebelum memulai animasi

Properti-properti tersebut dapat diringkas dengan shorthand

transition: property | duration | timing-function | delay

Contoh Animasi Background Sederhana

Di bawah ini adalah contoh penggunaan CSS Transition untuk membuat animasi pada background:

Transition Timing Function

Properti transition-timing-function dapat diisi dengan:

• linear (default)
• ease
• ease-in
• ease-out
• ease-in-out

Kalian dapat melihat perbedaannya dengan melihat contoh berikut:

Kesimpulan

CSS Transition itu mudahkan. Ada yang lebih menarik dari CSS Transition yaitu CSS Animation. CSS Animation memungkinkan kita membuat animasi yang lebih advanced lagi.