Transform dan Transition merupakan Property yang terdapat di CSS3. Transform digunakan untuk merubah bentuk suatu objek, baik perubahan skala maupun perputaran. Sedangkan Transition digunakan untuk mengatur waktu perubahan dari satu bentuk ke bentuk lainnya. Dengan memanfaatkan Property ini, nantinya Anda dapat membuat Animasi dan memberikan
efek menarik di website yang didesain.
Untuk mendapatkan hasil yang maksimal, tentunya Anda harus menggunakan Browser yang mendukung begitu juga dengan user.
Property Transform didukung oleh browser sebagai berikut :
Internet Explorer 9 membutuhkan awalan -ms-
Firefox membutuhkan awalan -moz-
Chrome dan Safari membutuhkan awalan -webkit-
Opera membutuhkan awalan
-o-
Sedangkan Property Transition didukung oleh browser sebagai berikut :
Internet Explorer belum mendukung properti transisi.
Firefox membutuhkan awalan -moz-
Chrome dan Safari membutuhkan awalan -webkit-
Opera membutuhkan awalan -o-
Memulai
Sekarang, mari perhatikan contoh animasi sederhana berikut ini :
Hello
Berikut syntax untuk menuliskan
transform & transition (animasi diatas) :
CSS3 : Transform dan Transition
Hello
Keterangan :
-moz-transition:all .5s; -moz-transition : pernyataan untuk memberi transition (durasi) pada Browser Firefox. all : diterapkan pada semua bagian objek .5s : waktu transisi ke bentuk yang lain adalah 0.5 detik.
-moz-transform:rotate(80deg); -moz-transform : pernyataan untuk memberi efek
transform pada Browser Firefox. rotate : efek transform yang diberikan adalah efek perputaran. 80deg : perputaran ebjek sebesar 80 derajat.
Dengan kreatifitas, Anda dapat membuat animasi lainnya untuk mendesain web yang indah. Untuk memberikan pengetahuan tambahan dan semangat belajar, berikut silahkan Anda lihat kreasi animasi menggunakan Property Transition dan Transform yang ada di CSS 3.
Kreasi Menggunakan CSS 3
CSS 3
Social Icons
Menu Navigasi Efek Zoom
CSS 3 Image Galery
Transisi CSS3
transisi CSS3 memungkinkan Anda untuk mengubah nilai properti lancar (dari satu nilai yang lain), selama durasi tertentu.
Contoh: Mouse elemen di bawah ini untuk melihat efek CSS3 transisi:
Browser Dukungan untuk Transisi
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi
pertama yang bekerja dengan awalan.
Milik
transition
26.0 4.0 -webkit-
10.0
16.0 4.0 -moz-
6.1 3.1 -webkit-
12.1 10.5 -o-
transition-delay
26.0 4.0 -webkit-
10.0
16.0 4.0 -moz-
6.1 3.1 -webkit-
12.1 10.5 -o-
transition-duration
26.0 4.0 -webkit-
10.0
16.0 4.0 -moz-
6.1 3.1 -webkit-
12.1 10.5 -o-
transition-property
26.0 4.0 -webkit-
10.0
16.0 4.0 -moz-
6.1 3.1 -webkit-
12.1 10.5 -o-
transition-timing-function
26.0 4.0 -webkit-
10.0
16.0 4.0 -moz-
6.1 3.1 -webkit-
12.1 10.5 -o-
Cara Menggunakan CSS3 Transisi?
Untuk membuat efek transisi, Anda harus menentukan dua hal:
properti CSS Anda ingin menambahkan efek ke
durasi efeknya
Catatan: Jika bagian durasi tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0.
Contoh berikut menunjukkan 100px * 100px red
elemen. The
elemen juga telah
ditentukan efek transisi untuk properti lebar, dengan durasi 2 detik:
