My Blog Menu

Recent
Article
Label
About

Friday, March 20, 2015

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:


Tanpa Efek Transisi:


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;

2 comments:

  1. Artikelnya bagus, sangat bermanfaat sekali..

    Lihat tutorial android dan blackberry terbaru gan  => check this

    ReplyDelete
    Replies
    1. Thanks gan...

      Karena gak punya BB ane cek tutorial androidnya aja

      Delete