20 CSS3 - Tutorial CSS3 Transition►► URL : http://wwdq.blogspot.com/2012/08/css3-tutorial-css3-transition.html.

Share

Oke setelah kurang lebih 1 tahun saya memposting pengenalan tentang CSS3, sekarang wwdq akan memberikan tutorial mengenai CSS3 yaitu CSS3 Transition.
CSS3 Transition ini berfungsi memberikan efek perubahan bertahap dari satu style ke style lainnya tanpa menggunakan flash. Mungkin sudah banyak yang tau yah tentang CSS3 ini, tetapi tak ada salahnya bila WWDQ memberikan penjelasan kembali :)
 

Browser yang support?
Untuk CSS3 Transition hanya beberapa browser pada saat ini yang mendukung.

Tutorial CSS3 Transition
Untuk efek transisi atau perpindahan style dari style yang satu ke lainnya, anda harus menentukan 2 hal, yaitu :

1. Tentukan properti CSS yang ingin diberi efek transisi
2. Tentukan durasi efek transisi tersebut

oke langsung ke contoh:
 Contoh ke 1 

Tutorial CSS3

World Web Design Q

Source code:

<style>

/* style pada saat normal memiliki lebar 300px */
.css3 {
transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
-webkit-transition: width 2s;
background: #ef9e10;
height: 100px;
text-align: center;
width: 300px;
}

/* pada saat mouse ada di elemen, lebarnya menjadi 100% */
.css3:hover {
width:100%;
}
</style>


<div align="center" class="css3">
Tutorial CSS3</div> 

Keterangan

Firefox : -moz-transition: width 2s;
Opera : -o-transition: width 2s;
Chrome / Safari : -webkit-transition: width 2s;

Disini kita membuat efek transisi perubahan lebar dengan durasi efek 2 detik

Kita juga bisa memberikan beberapa properti CSS dalam 1 elemen, misalkan kita mau mengubah style width, height, background, dan lain-lain.

 Contoh ke 2 

Tutorial CSS3

World Web Design Q

Source Code:

<style type="text/css">
/* style pada saat normal memiliki
lebar 300px, tinggi 100px, background warna biru */
.css3_2 {
width: 300px;
height: 100px;
background: #8eceff;
text-align: center;
transition: width 2s, height 2s, background 2s; 
-moz-transition: width 2s, height 2s, background 2s; 
-o-transition: width 2s, height 2s, background 2s;
-webkit-transition: width 2s, height 2s, background 2s;  
}

/* pada saat mouse ada di elemen
lebar 100%, tinggi 130px, background warna orange */
.css3_2:hover {
width:100%;
height:130px;
background:#ef9e10;
}
</style>


<div align="center" class="css3_2">
<span style="font-size: large;"><b>Tutorial CSS3</b></span></div>

Setiap properti CSS , durasi efeknya bisa berbeda, sesuaikan saja dengan kebutuhan.

Sekian tutorial mengenai CSS3 Transition, semoga bisa membantu anda, Terimakasih.

Referensi : http://w3schools.com
Bila Kurang Jelas, silakan bertanya dibawah ini .

Post Info :
Judul = CSS3 - Tutorial CSS3 Transition

Url = http://wwdq.blogspot.com/2012/08/css3-tutorial-css3-transition.html

Author = Riloaw. At : 10.03 Kamis, 09 Agustus 2012 | Comment:20

Artikel Terkait