Tutorial CSS - Efek Transisi dengan CSS3

Untuk membuat sebuah objek yang bergerak, berganti warna, berputar ataupun lainnya dan diberi efek transisi sehingga tampil sebagai animasi tidak perlu menggunakan javascript atau jQuery. Kita dapat menggunakan CSS khususnya CSS3 yang akan memberikan efek transisi ketika disorot dengan pointer (hover). Menggunakan property transition pada CSS3 Anda dapat menentukan durasi animasi/transisi perubahan objek

Berikut adalah contoh objek dengan efek transisi.

Berikut ini saya tunjukkan script CSS nya.
.objek1 {
     width : 100px;
     height : 100px;
     background-color : red;
     margin : 0 auto;
     transition : all 0.7s ease-in-out; /*untuk menambahkan efek transisi ketika objek lepas dari sorotan*/
}

.objek1:hover {
     background-color : yellow;
     transition : all 0.7s ease-in-out; /*untuk menambahkan efek transisi ketika objek disorot*/
}

Dari script di atas, objek yang saya beri nama class objek1 berbentuk persegi dengan warna merah. Kemudian ketika disorot warna perlahan berubah menjadi kuning. Proses perubahan itulah yang menggunakan property transition di CSS3. Komentar di script CSS yang saya buat menandakan bahwa ketika property transition dicantumkan dalam class objek1:hover berarti efek transisi muncul ketika objek1 disorot saja (hover). Jika ingin efek transisi tetap ada ketika Anda melepas sorotan makan tambahkan pula property transition di class objek1.

Property transition dapat ditambahkan untuk transformasi objek CSS3 pula.

Sekian tutorial saya mengenai efek transisi dengan CSS3 semoga bermanfaat :) terus berkarya!