Dasar Dasar Transisi Di CSS3

Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah

Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun kita sudah pernah melihatnya tapi gak tahu koding apa yang dipakai oleh desainer websitenya untuk membuatnya.. Ok d saya jelasin sedikit dlu, dalam bahasa Indonesia Transisi berarti perpindahan. Perpindahan yang dimaksud disini ial...

Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun kita sudah pernah melihatnya tapi gak tahu koding apa yang dipakai oleh desainer websitenya untuk membuatnya.. Ok d saya jelasin sedikit dlu, dalam bahasa Indonesia Transisi berarti perpindahan. Perpindahan yang dimaksud disini ialah sesuatu kejadian yang terjadi baik dari perubahan bentuk,posisi maupun waktu yang akan dipakai untuk perpindahannya.. Sebagai salah satu contoh mungkin teman2 pernah lihat dong animasi yang terjadi di button ataupun mmenu web atau blog, na dasar yang dipakai untuk membuat untuk aniamsinya adalah animasi transisi. Kembali lagi ke topic kita Sesuai standart W3C property transisi ada 4 macam yaitu : 1. transition-property 2. transition-duration 3. transition-timing-function 4. transition-delay Agar teman2 gak jadi lebih penasaran kita langsung aja y ke prakteknya.. 1. transition-property : perpindahan ini terjadi di bagian property yang akan dianimasikan. Contoh Property yang dimaksud bisa merupakan perubahan width(lebar),height(tinggi),color(warna),background(latar belakang) dll. Sebagai contoh, buka notepad teman2 kemudian ketikkan kode di bawah ini : <style> .contoh-property { width:150px; height:150px; background: #0003B9; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */

-o-transition: width 2s; /* Opera */ color:red; font:Arial 15px Bold red; text-align:center; } .contoh-property:hover{ width:300px; } Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya : Maka didapat hasil ilustrasi sebagai berikut :

Jika ingin lebih memahami lagi property lagi coba teman2 ganti width:300px; tadi menjadi height:300px, kemudian pilih File di Notepad lalu pilih Save. Setelah itu klik kanan di browser kemudian pilih muat ulang atau reload. Arahkan kembali mouse kearah kotak dan lihat perubahan apa yang terjadi..!!?? Nah bisa diartikan property itu seperti bagian dari objek yang akan dianimasikan.. 2. transition-duration : fungsi dari kode ialahuntuk menentukan kecepatan animasi dalam satuan detik. Nilai yang dipakai di transition-duration ada 2 macam yaitu second(s) ataupun millisecond(ms).. Sebagai contoh, buka notepad teman2 kemudian ketikkan kode di bawah ini : <style> .contoh-duration1 { width:150px; height:150px; background: #0003B9; transition: width 2s; duration:5s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */

-moz-transition-duration: 5s; /* Firefox 4 */ -webkit-transition-duration: 5s; /* Safari and Chrome */ -o-transition-duration: 5s; /* Opera */ color:red; font:Arial 15px Bold red; text-align:center; } .contoh-duration2:hover{ width:300px; } .contoh-duration2 { width:150px; height:150px; background: #05D400; transition: width 2s; duration:0.5ms; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ -moz-transition-duration: 0.5ms; /* Firefox 4 */ -webkit-transition-duration: 0.5ms; /* Safari and Chrome */ -o- transition-duration: 0.5ms; /* Opera */ color:red; font:Arial 15px Bold red; text-align:center; } .contoh-duration1:hover{ width:300px; } Setelah itu teman2 ketikkan di body kode pemanggil dibawah ini untuk memanggil class kode diatas : Maka didapat hasil ilustrasi sebagai berikut :

Disinilah funsi transiton:duration yang dimaksud., dari kedua kotak diatas tadi terjadi perbedaan kecepatan saat animasi mulai berjalan ketika di hover. Jadi dapat kita simpulkan semakin kecil nilai waktu yang kita msukkan maka semakin cepat animasi yang akan dia kerjakan dalam 1 detik. 3. transition-timing-function : fungsi digunakan untuk efek percepatan animasi. Efek-efek percepatan animasi di bagi menjadi 6 bagian. - default - liniear - ease-in - ease-out - ease-ini-out - cubic-beizer Untuk contoh percepatan animasi ini teman2 bisa ketikkan kode dibawah ini untuk melihat perbedaan percepatan animasi yang dijalankan : <style type="text/css"> #kotak{ padding:.5em 0; border:1px solid #ccc; border-left:1em solid green; border-right:1em solid #006; background:#eee } #kotak .objek{ margin:10px 10px; width:100px; border:2px solid; border-color:green; background:#cfc; line-height:40px; text-align:center; -webkit-transition-duration:2s; -moz-transition-duration:2s; -o-transition-duration:2s; -ms-transition-duration:2s } #kotak:hover .objek{ width:690px; border-color:#006;background:#ccf; border-radius:1.5em } Setelah itu teman2 ketikkan di body kode pemanggil dibawah ini untuk melihat perbedaan

percepatan animasinya : Maka didapat hasil ilustrasi sebagai berikut :

4. transition-delay : dengan funsi maka teman2 bisa menerpakan waktu tunggu sebelum animasi dijalankan. Untuk lebih jelasnya teman2 ketikkan kode dibawah ini : <style> .contoh-delay { width:150px; height:150px; background: #0003B9; transition: width 2s; delay:5s; -moz-transition: width 2s; /* Firefox 4 -webkit-transition: width 2s; /* Safari -o-transition: width 2s; /* Opera */ -moz-transition-delay: 5s; /* Firefox 4 -webkit-transition-delay: 5s; /* Safari -o-transition-delay: 5s; /* Opera */ color:red; font:Arial 15px Bold red; text-align:center; }

*/ and Chrome */ */ and Chrome */

.contoh-property:hover{ width:300px; } Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya : Maka didapat hasil ilustrasi sebagai berikut :

Jadi dari ilustrasi diatas maka didapatkan kesimpulan semakin besar waktu delay yang kita masukkan maka animasi akan menunggu selama waktu yang kita masukkan baru kemudian menjalankan animasinya kembali begitu ketika kembali keposisinya semula.. Na jika teman2 ingin menyatukan semua property yang yang telah kita bahas tadi, teman teman bias ketikkan kode di bawah ini sebagai contoh penggabungan property animasi : <style type="text/css"> .contoh-animasi-gabungan { width:150px; height:150px; background:red; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } .contoh-animasi-gabungan:hover

{ width:200px; } Simpan dengan nama Animasi Gabungan.html Yup… Akhirnya tutor harus disini dulu d.. Mudah2n dari penjabaran semua contoh dan pengertian diatas tadi bias membuat teman2 lebih paham dan bias berkreatif. Saya harap tutor ini bias membantu teman2 sekalian dalam mendalami css transisi.. Jika Ada yang kurrang berkenan ataupun teman2 sekalian kurang mengerti bias dikomen lagnsung dibawah ini.. Buat teman2 Yang ingin mendownload file latihan css transisinya bisa langsung menuju link yang sudah saya sediakan dibawah . silahkan teman utak atik sesuai dengan tutor say ini atau bias cari referensi yang lain. Akhir kata Sampai bertemu lagi di tutor berikutnya dan salam sukses untuk sobat jaco…. DOWNLOD BELAJAR CSS TRANSISI

Tentang Penulis Irvansyah Tertarik Dengan Web Desain, Photoshop, dan Animasi Flash. Mohon panduan Dan arahan Agar Dapat menjadi Lebih Baik dab Bisa Sharing ke sesama..