Bab IX : Belajar CSS3 Bagian 3 ( Transisi )

Pasti kalian sudah tahu kan transisi itu apa, semacam efek pergantian efek dari bentuk sebelumnyake bentuk sesudahnya, sudah pasti CSS ini sangat bermanfaat, terlebih lagi untuk membuat web / blog menjadi lebih hidup, coba lah lihat efek ini pada area post ini coba arahkan kursor maka akan mengalami efek pergantian.

Cara ini sangat erat kaitannya dengan hover maka kamu harus menguasai teknik hover yah minimal mengetahui sedikit >> Baca CSS tentang hover, jika tanpa menggunakan transisi coba lihat.

Yang akan kalian pelajari yaitu
Membuat efek transisi dengan CSS3
 a. transition property
 b. transition duration
 c. transition delay

Tahap Sebelumnya | Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan ) |

Pertama - tama saya akan tunjukan efek transisi yang saya terapkan pada Farkryzer ini
1. Judul post ( hover | active )
2. Background dan border post ( hover )
3. border menubar halaman utama ( hover )
4. dan saya bingung ( hahahaha ... )

baiklah langsung saja ke pokok bahasan kita :

   Transisi ( Transitions )
     Sangat mudah sekali untuk memahami teknik pembuatan efek transisi ini, orang awam puin bisa ( termasuk saya ), apalagi jika kamu sudah jago teknik hover >>> Baca CSS tentang hover
Baiklah rumusnya adalah :

.post {background#f2f2f2;border: 4px solid #000;-moz-transition-property:background,border;-moz-transition-duration:.25s;-webkit-transition-property:background,border;-webkit-transition-duration:.25s;-o-transition-property:background,border;-o-transition-duration:.25s;}
.post:hover {background:#fff;border-radius:30px;}

# Keterangan :

A. Property ( elemen yang akan di buat transisi )
-moz-transition-property:... <<< kamu tambahkan agar firefox 4 kompatibel
-webkit-transition-property:... <<< + agar chrome & safari kompatibel
-o-transition-property:... <<< + agar opera kompatibel
... kamu ganti apa yang akana kamu buat efek transisi border, background dll. Contoh diatas saya umpamakan border dan background maka transisinya yaitu 1.background: #f2f2f2 menjadi #fff dan 2.border: ( persegi tidak radius ) menjadi ( radius 30px )

Note: kamu dapat gunakan all jika efek ingin kamu tambahkan ke semuanya.

B. Duration ( waktu berlangsungnya transisi )
-moz-transition-duration:...s <<< + agar firefox 4 kompatibel
-webkit-transition-duration:...s <<< + agar chrome & safari kompatibel
-o-transition-duration:..s <<< + agar opera kompatibel
...s kamu ganti sesuai keinginan, contohnya yaitu saya masukan .2s berarti durasi / waktu transisi berlangsung selama 0,2 sekon atau 1/5 detik.

C. Delay ( waktu penjeda untuk memulai transisi)
jika kamu ingin membuat waktu jeda sebelum mulai transisi gunakan delay 
-moz-transition-delay:...s <<< + agar firefox 4 kompatibel
-webkit-transition-delay:...s <<< + agar chrome & safari kompatibel
-o-transition-delay:..s <<< + agar opera kompatibel

Ada yang ditanyakan ? Silahkan berkomentar di bawah post ini

Tahap Berikutnya

Farkryzer