Efek Transisi CSS (Transition Effect CSS)

Assalamualaikum Wr. Wb. Disini saya akan menjelaskan cara termudah untuk mendapatkan efek transisi, yaitu dengan menggunakan kode transition-duration:[waktu][s][ms]; pada CSS, sehingga waktu kita mengubah lokasi, bentuk atau memutar elemen, maka akan ada efek sebelum elemen berubah / berpindah, misalnya:

MUTER
transisi:			ms
putaran:			deg

Pada contoh diatas kita dapat langsug melihat hasil transisi setelah mengubah nilainya dengan menyeret kursor ke dalam lingkran diatas.
Contoh nilai transisi diatas adalah 500ms maka ditulis transition-duration:500ms; jika dalam hitungan milidetik(ms) atau transition-duration:0.5s; jika dalam hitungan detik(s).

Disini saya memberikan contoh menu sederhana yang akan terlihat profesional dengan efek transisi

Dengan Efek Transisi:

© 2015 Faid Alfarisi

Tanpa Efek Transisi:

© 2015 Faid Alfarisi

Bisa dilihat perbedaan yang sangat jelas, padahal kedua contoh menggunakan HTML dan JS yang sama hanya berbeda pada efek transisinya saja.

Adapun efek transisi yang menggunakan transition:[animasikan] [waktu] [mode];, animasikan berarti apa yang dianimasikan (diberi efek transisi), bisa diisi dengan all, width, height, opacity, dll... tetapi kebanyakan dan biasanya diisi dengan all, untuk waktu diisi sama dengan transition-duration: diatas, dan untuk mode bisa diisi dengan ease (efek default), ease-in (pelan disaat mulai animasi dan akan terus bertambah cepat), ease-out (melambat diakhir animasi), ease-in-out (pelan saat mulai dan akhir), linear [waktu] (pelan menurut waktu linear atau akan seperti ease jika tanpa waktu), contoh transition:all 500ms ease-in-out;