Belajar Membuat CS3 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 :
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.
Berikut kode CSS3 dari contoh diatas :
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.
Berikut hasilnya :
B erikut hasilnya :
Berikut contoh lain :
Berikut hasilnya :
Selamat mencoba dan Semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
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-.
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.
Berikut kode CSS3 dari contoh diatas :
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.
Berikut hasilnya :
B erikut hasilnya :
Berikut contoh lain :
Berikut hasilnya :
Selamat mencoba dan Semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Keren ya Rid, ...
ReplyDelete@Ridho IS Ramidianto Thx.. Sob...
ReplyDelete