Mengenal CSS Transition lebih Dekat

Jumat, 28 Desember 2012

Hai para Blogger, ada sedikit tips nih buat template blog / website kalian agar terlihat "sedikit" menarik.. Mukin dari para pembaca sendiri bingung apa itu efek transition ? jika bingung silahkan cari di Google pengertian CSS Transition, atau anda pernah mengenal kode seperti ini: -webkit-transition:####; ? ataupun efek animasi CSS tanpa javascript? yep. Namun sayangnya type css3 ini tidak akan bekerja pada Internet Explorer versi lawas.. Oke, saya akan memberitahu anda seputar Transisi pada CSS, mari kita baca.

kata sang W3, bentuk umum dari kode Transisi adalah sebagai berikut:
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-o-transition: all 2s; /* Opera */
-webkit-transition: all 2s; /* Safari dan Chrome */
baiklah, sekarang kita deskripsikan satu persatu.

#Hijau adalah kode CSS sesuai type Browser.
#Oranye adalah kode CSS Transisi tersebut.
#Biru adalah "APA" yang akan ditransisikan / dianimasikan, Mis. width / height / color / semuanya (all)
#Merah adalah Durasi / Lama dalam melakukan Transisi.
*catatan : Kode yang berwarna merah / biru itu tempatnya boleh dibolak balik atau ditukar.

Anda juga bisa menuliskan Transisi bertingkat tanpa menulis kode yang sama.
contoh penulisan yang sama:
-webkit-transition : padding 1s;
-webkit-transition : color 2s;
atau penulisan yang bertingkat seperti ini:
-webkit-transition : padding 1s, color 2s;
Terserah anda pilih yang mana, tapi saya sarankan pilih yang berkualitas :P Untuk penggunaan transisi, Perhatikan contoh dibawah ini.

a{
 font-family : arial, consolas, times new roman ;
 color : green ;
 font-size : 12px ;
}

a:hover {
 color : red ;
 font-weight : bold ;
 font-size : 20px ;
 -webkit-transition : 1s color, 3s font-size ;
 }
Maka, warna link dari yang tadinya Hijau akan berubah menjadi warna merah selama 1 detik, dan juga Ukuran font akan berubah selama 3 detik.

paham? harus paham :P jika tidak paham, maka perhatikan warna-warna yang telah saya tandai pada kode contoh penggunaan transisi sederhana diatas :P

Beberapa contoh proyek transisi dibawah ini:

Perbedaan 1 code: .x {
background: darkRed;
-webkit-transition: 1s background;
}
.x:hover {
background: lightBlue;
}

Perbedaan 2 code: .t {
background: darkRed;
-webkit-transition: 0s background;
}
.t:hover {
background: lightBlue;
-webkit-transition: 1s background;
}

Perbedaan 3 code: .f {
background: darkRed;
-webkit-transition: 3s background;
}
.f:hover {
background: lightBlue;
-webkit-transition: 0s background;
}

Perbedaan 4 code: .z {
background: darkRed;
border: none; padding: 0;
-webkit-transition: 3s background, 0.5s padding, 1s border;
}
.z:hover {
background: lightBlue;
border:3px solid #0000ff;
padding:0 6px;
-webkit-transition: 0.5s background, 1s padding, 3s border;
}

Atau anda juga bisa langsung coba di halaman percobaan.