Transisi menggunakan CSS
بسم الله الرحمن الرحيم
اللهم صل على سيدنا محمد واله وصحبه وسلم
Transisi menggunakan CSS
Jumpa lagi bersama lumbungguru, tutor saya hari ini tentang transisi di CSS3.. Mungkin diantara teman-teman 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 jelaskan sedikit dulu, 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 teman-teman pernah lihat animasi yang terjadi di button ataupun menu web atau blog, dasar yang dipakai untuk membuat untuk aniamsi tersebut 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
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> .contoh-property { width : 150px ; height : 150px ; background : #0003B9 ; transition: width 2 s; -moz-transition: width 2 s; /* Firefox 4 */ -webkit-transition: width 2 s; /* Safari and Chrome */ -o-transition: width 2 s; /* Opera */ color : red ; font : Arial 15px Bold red ; text-align : center ; } .contoh-property:hover{ width : 300px ; } </style> |
1 | < div class=” contoh-property”>Ini Contoh Animasi Property</ div > |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <style> .contoh-duration 1 { width : 150px ; height : 150px ; background : #0003B9 ; transition: width 2 s; duration: 5 s; -moz-transition: width 2 s; /* Firefox 4 */ -webkit-transition: width 2 s; /* Safari and Chrome */ -o-transition: width 2 s; /* Opera */ -moz-transition-duration: 5 s; /* Firefox 4 */ -webkit-transition-duration: 5 s; /* Safari and Chrome */ -o-transition-duration: 5 s; /* Opera */ color : red ; font : Arial 15px Bold red ; text-align : center ; } .contoh-duration 2: hover{ width : 300px ; } .contoh-duration 2 { width : 150px ; height : 150px ; background : #05D400 ; transition: width 2 s; duration: 0.5 ms; -moz-transition: width 2 s; /* Firefox 4 */ -webkit-transition: width 2 s; /* Safari and Chrome */ -o-transition: width 2 s; /* Opera */ -moz-transition-duration: 0.5 ms; /* Firefox 4 */ -webkit-transition-duration: 0.5 ms; /* Safari and Chrome */ -o- transition-duration: 0.5 ms; /* Opera */ color : red ; font : Arial 15px Bold red ; text-align : center ; } .contoh-duration 1: hover{ width : 300px ; } </style> |
1 2 | < div class=” contoh-duration1”>Ini Contoh Animasi Duration 1</ div > < div class=” contoh-duration2”>Ini Contoh Animasi Duration 2</ div > |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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: 2 s; -moz-transition-duration: 2 s; -o-transition-duration: 2 s; -ms-transition-duration: 2 s } #kotak:hover .objek{ width : 690px ; border-color : #006 ; background : #ccf ; border-radius: 1.5em } </style> |
1 2 3 4 5 6 7 8 | < 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 > |
4. transition-delay : dengan funsi maka teman2 bisa menerpakan waktu tunggu sebelum animasi dijalankan.
Untuk lebih jelasnya teman2 ketikkan kode dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <style> .contoh-delay { width : 150px ; height : 150px ; background : #0003B9 ; transition: width 2 s; delay: 5 s; -moz-transition: width 2 s; /* Firefox 4 */ -webkit-transition: width 2 s; /* Safari and Chrome */ -o-transition: width 2 s; /* Opera */ -moz-transition-delay: 5 s; /* Firefox 4 */ -webkit-transition-delay: 5 s; /* Safari and Chrome */ -o-transition-delay: 5 s; /* Opera */ color : red ; font : Arial 15px Bold red ; text-align : center ; } .contoh-property:hover{ width : 300px ; } </style> |
1 | < div class=” contoh-delay”>Ini Contoh Animasi Delay</ div > |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | < html > < head > < 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; } </ style > </ head > < body > < div class=” contoh-animasi-gabungan”></ div > < body > </ 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
Posting Komentar untuk "Transisi menggunakan CSS "
Silahkan tinggalkan pesan untuk artikel kami