CSS3 Transisi

Setelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya kegaya yang lain, tanpa menggunakan animasi Flash ataupun javascripts.

Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. Berikut beberapa browser yang mendukung fitur ini :

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

Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan 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.

Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :

<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

 Berikut contoh lain :

<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.