Membuat Efek Transisi / Transition dengan CSS3
Animasi transisi dengan CSS3 lebih mudah digunakan daripada membuat animasi dengan flash atau javascript, selain itu lebih ringan dari pada menggunakan flash atau javascript.  CSS Transisi merupakan kode perintah untuk membuat objek bergerak atau membuat perubahan pada satu gaya ke gaya yang lain dengan efek animasi bergerak dengan perintah hover.

Hal yang harus di perhatikan agar CSS3 Transisi ini dapat bekerja dengan baik seperti ; kita harus menentukan Properti CSS, Menentukan durasi efek dan jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "0". 

Sintaks CSS Transisi :

.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, delay ini jika kamu ingin menerapkan waktu menunggu sebelum efek transisi dijalankan. 

1. Contoh Transisi Width / Melebar :


Contoh Elemen yang menggunakan Transisi width / melebar !

CSS3 :

#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;
}

Html :

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

2. Contoh Transisi Membesar dan Berputar :


Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !

CSS3

#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 */
}

HTML

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

Efek Transisi pada Warna dan Background


Contoh Elemen yang menggunakan Transisi Warna & Background!

CSS3

#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;

Html

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

Transisi Universal

Kekurangan Transisi/Transition dengan CSS3 yaitu 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-.
*:link, *:visited, *:hover, *:active, *:focus {
  -webkit-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -moz-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -ms-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  -o-transition:color .25s linear, background-color .25s linear, border-color .25s linear;
  transition:color .25s linear, background-color .25s linear, border-color .25s linear;
}
Sekian Penjelasan Mengenal Efek Transisi CSS3 .

Source: 

http://www.dte.web.id/2011/10/perkenalan-css-transisi.html
http://thetutorialblogger.blogspot.com/2012/10/css-transisi.html
http://blog.kangrian.com/2013/07/mengenal-efek-transisi-transition-css3_19.html
0 Komentar untuk "Membuat Efek Transisi / Transition dengan CSS3"