CSS3 Transisi

Dengan CSS3 Transisi , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi Flash ataupun JavaScript.
Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. 

Berikut beberapa browser yang mendukung fitur ini :
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-.

Ada 2 hal yang harus kita 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".

Cara kerjanya kita menggunakan fitur mouse-over , yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat , dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula.

Silahkan anda arahkan pointer mouse anda pada kotak-kotak yang ada dibawah ini.

Contoh 1

Elemen yang menggunakan CSS3 Transisi

Kode :

<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi:hover
{
width:300px;
}
</style>
<div class="transisi">Elemen yang menggunakan CSS3 Transisi</div>

Contoh 2
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya , misalnya efek transisi ke samping sekaligus ke bawah.

Efek transisi melebar kesamping sekaligus kebawah

Kode :

<style type="text/css">div.transisi2{width:100px;height:100px;background-color:#e0e0e0;border:3px solid #3b5998;padding:10px;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div.transisi2:hover{width:300px;height:300px;}</style><div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>

Contoh 3

Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode :

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi3:hover
{
width:300px;
height:40px;
}
</style>
<div class="transisi3">Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

Contoh 4

Efek transisi membesar dan berputar

Kode :

<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
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 */
}
div.transisi4: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 */
}
</style>
<div class="transisi4">Efek transisi membesar dan  berputar</div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Admin .:: Get Widget ::.

Keterangan Artikel Ditulis oleh : Dhecun Blog Judul : CSS3 Transisi Berlangganan artikel Komentari artikel ini...!!! <b>Dhecun Blog : <a href='http://dhecun.blogspot.com/2012/12/css3-transisi.html'>CSS3 Transisi</a></b>

Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.

Sumber : <a href='http://dhecun.blogspot.com/2012/12/css3-transisi.html'>CSS3 Transisi</a>