Dasar Dasar Transisi Di CSS3

Transkripsi

1

2 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 background: #0003B9; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */

3 -o-transition: width 2s; /* Opera */ color:red; font:arial 15px Bold red;.contoh-property:hover width:300px; Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya : <div class= contoh-property >Ini Contoh Animasi Property</div> 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 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 */

4 -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;.contoh-duration2:hover width:300px;.contoh-duration2 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;.contoh-duration1:hover width:300px; Setelah itu teman2 ketikkan di body kode pemanggil dibawah ini untuk memanggil class kode diatas : <div class= contoh-duration1 >Ini Contoh Animasi Duration 1</div> <div class= contoh-duration2 >Ini Contoh Animasi Duration 2</div> Maka didapat hasil ilustrasi sebagai berikut :

5 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; -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

6 percepatan animasinya : <div id="kotak"> <div class="objek">default»</div> <div class="objek" style="-webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear;">linear»</div> <div class="objek" style="-webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in;">ease-in»</div> <div class="objek" style="-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out;">ease-out»</div> <div class="oobjek" style="-webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;">ease-in-out»</div> <div class="objek" style="-webkit-transition-timing-function: cubic-bezier(1,0,0,1); -moz-transition-timing-function: cubic-bezier(0,1,1,0); -o-transition-timing-function: cubic-bezier(0,1,1,0);">cubic-bezier»</div> </div> 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 background: #0003B9; transition: width 2s; delay:5s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ -moz-transition-delay: 5s; /* Firefox 4 */ -webkit-transition-delay: 5s; /* Safari and Chrome */ -o-transition-delay: 5s; /* Opera */ color:red; font:arial 15px Bold red;

7 .contoh-property:hover width:300px; Kemudian teman2 ketikan di body kode pemanggil dibawah ini untuk memanggil efek animasinya : <div class= contoh-delay >Ini Contoh Animasi Delay</div> 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 : <html> <head> <style type="text/css">.contoh-animasi-gabungan 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

8 width:200px; </head> <body> <div class= contoh-animasi-gabungan ></div> <body> </html> 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..