CSS: CSS3 TRANSISI

                          Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
          Kali ini saya akan membahas tentang CSS3 TRANSISI apa si yang di maksud dengan CSS3 TRANSISI .

B. LATAR BELAKANG
         Dalam tutorial ini kita akan mengeksplorasi transformasi dan transisi CSS dengan menciptakan sesuatu yang lebih berguna.

C. TUJUAN dan MAKSUD
         Akan membangun satu HTML statis yang akan memanfaatkan transformasi dan transisi dalam slider, ditambah beberapa efek hover menarik.

D. PEMBAHASAN
         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....

E. KESIMPULAN
        Hasilnya bisa di lihat sendiri dengan memcoba membuat CSS3 TRANSISI sendiri, Semoga berhasil.

F. PENUTUP
       Jangan lupa luangkan waktu untuk beri komentar ya......Terima kasih.



                                        Wassalamu'alaikm Wr.Wb