Mengenal Efek Transisi / Transition CSS3

Pada postingan kali ini saya akan membahas dan mengenal lebih jauh mengenai CSS3 Transisi , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi Flash ataupun JavaScript yang membutuhkan load lebih lama ( Fast is Sexy ).

*( Kekurangan ) Belum support/mendukung pada seluruh browser , dan hanya mendukung pada 4 browser populer saja diantaranya :

1. Internet Explorer tidak lagi mendukung properti transisi.
2. Firefox 4 membutuhkan awalan -moz-.
3. Chrome dan Safari membutuhkan awalan -WebKit-.
4. Opera membutuhkan awalan -o-.

2 hal yang harus di perhatikan agar CSS3 Transisi ini dapat bekerja dengan baik yaitu :

1. Kita harus menentukan Properti CSS.
2. Menentukan durasi efek.

Jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "0".

Sintaks CSS Transisi seperti ini :


.contoh {
 -webkit-transition: nama_properti durasi tipe_kecepatan delay;
 -moz-transition: nama_properti durasi tipe_kecepatan delay;
 -ms-transition: nama_properti durasi tipe_kecepatan delay;
 -o-transition: nama_properti durasi tipe_kecepatan delay;
 transition: nama_properti durasi tipe_kecepatan delay;
}

Keterangan Sintaks di atas :

1. Nama_Properti ini mewakili properti yang akan dianimasikan.
2. Durasi digunakan untuk menentukan kecepatan animasi dalam satuan detik.
3. Tipe_Kecepatan digunakan untuk menentukan efek percepatan animasi. Efek-efek percepatan animasi dalam CSS Transisi diantaranya:

default
linear
ease-in
ease-out
ease-in-out
cubic-bezier

4. Delay ini jika kamu ingin menerapkan waktu menunggu sebelum efek transisi dijalankan.

Sekarang Kita coba dengan menggunakan event "HOVER/Over" , yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat atau tersentuh, dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula. Sekian penjelasan mengenai Efek CSS3 Transisi yang akan kita bahas kali ini , berikut adalah Kumpulan CSS3 TRANSISI / TRANSISITION dengan Demonstrasi nya ..

1. Contoh Transisi Width / Melebar :

Contoh Elemen yang menggunakan Transisi Width / melebar !

Cara Memanggil-nya :


<div id="transisi1">Contoh Elemen yang menggunakan Transisi width / melebar !</div>

Kode CSS3-nya :


#transisi1
{
width:120px;
height:120px;
background-color:#e0e0e0;
border:3px solid #cc0000;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#transisi1:hover
{
width:500px;
}

2. Contoh Transisi Membesar dan Berputar :

Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !

Cara Memanggil-nya :


<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Kode CSS3-nya :


#transisi2
{
width:120px;
height:120px;
background-color:#e0e0e0;
border:3px solid #cc0000;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
#transisi2:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}

Efek Transisi pada Warna dan Background

Contoh Elemen yang menggunakan Transisi Warna & Background!

Cara Memanggil-nya :


<div id="colorbackground">Contoh Elemen yang menggunakan Transisi Warna & Background!</div>

Kode CSS3-nya :


#colorbackground {
  width:90%;
  background:gray;
  color:black;
  border:2px solid #222;
  padding:15px;
  font:bold 20px Sans-Serif;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#colorbackground:hover {
  color:white;
  background:black;
}