Tutorial Belajar CSS 3 Part 6 – Transisi pada CSS3
Jika dalam tutorial sebelumnya kita telah belajar mengenai property trasnform yang ada di CSS3, yang digunakan untuk merubah tampilan dari objek web, seperti perubahan ukuran, rotasi dan lain sebagainya, nah dalam tutorial ini kita akan membahas mengenai property transition yang bisa kita berikan pada perubahan bentuk dari objek yang menggunakan property transform.
dengan menggunakan property transition anda dapat mengatur beberapa parameter seperti waktu yang dibutuhkan untuk transisi, kecepatan untuk transisi, dan beberapa parameter yang lainnya.
Penggunaan Property Transition
Seperti yang telah kita bahas diawal property transition digunakan untuk mengatur perubahan yang telah kita set di property transform, gimana bingung ya….
Jadi Begini teman – teman semisal kita set sebuah objek dengan property transform scale (mempebesar objek), nah dengan menggunakan property trasition ini kita bisa set durasi waktu dari proses perubahan ukuran objek tersebut.
Jelasinnya agak susah nih… langsung aja contoh skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 300px; background: green; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } div:hover { width: 300px; height: 300px; } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan dengan nama transition.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini..
ketika kursor mouse kita letakkan di atas dari objek maka hasilnya adalah seperti berikut :
Untuk melihat contoh hasil :
Keterangan :
- pada gambar pertama objeknya memiliki ukuran height 300 pixel dan width 100 pixel
- Pada gambar kedua ketika ada kursus mouse maka ukuran lebar dari objek akan berubah menjadi 300 pixel, hal tersebut karena kita memberikan nilai property transition: 2s; sehingga proses perubahannya adalah 2 detik.
Memberikan lebih dari satu waktu transisi yang berbeda
Jika dalam contoh diatas kita sudah mengenai apa fungsi property transition dengan value waktu dengan satuan detik, anda juga dapat memberikan beberapa waktu transisi yang berbeda di tiap tiap masing perubahan,, contohnya kita memberikan perubahan terhadap warna, dan lebar.
untuk perubahan warnanya kita berikan waktu 5 detik, tapi untuk perubahan lebarnya kita beri waktu hanya 2 detik, maka skripnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 300px; background: green; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s,background-color 5s; } div:hover { width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div></div> </body> </html> |
untuk hasilnya adalah sebagai berikut ini :
Mengatur kecepatan transisi
Anda juga bisa mengatur kecepatan dari transisi, maksud dari kecepatan disini bukan waktu yang digunakan untuk transisi, kalau itu sudah kita bahas sebelumnya, maksud disini adalah kita bisa mengatur bagaimana pergerakan dari transisinya…
mungkin teman – teman sudah mengenai istilah ease-in ease-out kan,,, nah di CSS3 ada beberapa lagi istilahnya antara lain :
- ease = transisi akan dimulai dari slow diawal, lalu cepat, dan slow diakhir transisi, ini adalah nilai default, jadi kalau parameter ini tidak diisikan maka akan bernilai ease
- linier = transisi akan memiliki kecepatan yang sama dari awal hingga akhir transisi
- ease-in = transisi akan lambat diawal
- ease-out = transisi akan lambat diakhir
- ease-in-out = transisi dengan slow diawal dan akhir transisi
untuk contohnya silahkan perhatikan skrip berikut :
|
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 43 44 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 100px; background: green; -webkit-transition: width 4s; /* Safari */ transition: width 4s; color:white; } /* For Safari 3.1 to 6.0 */ #div1 {-webkit-transition-timing-function: linear;} #div2 {-webkit-transition-timing-function: ease;} #div3 {-webkit-transition-timing-function: ease-in;} #div4 {-webkit-transition-timing-function: ease-out;} #div5 {-webkit-transition-timing-function: ease-in-out;} /* Standard syntax */ #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} div:hover { width: 500px; } </style> </head> <body> <div id="div1">Contoh linear</div><br> <div id="div2">Contoh ease</div><br> <div id="div3">Contoh ease-in</div><br> <div id="div4">Contoh ease-out</div><br> <div id="div5">Contoh ease-in-out</div><br> </body> </html> |
semisal kita simpan dengan nama speed_transition.html, lalu dibuka di browser maka hasilnya adalah sebagai berikut :
Memberikan Delay transisi
Satu lagi yang akan kita bahas mengenai transisi, anda juga dapat memberikan delay terhadap transisi dalam satuan detik, sehingga transisi tidak langsung dilakukan, ada delay waktu semisal 2s (detik) baru transisi akan dilakukan, untuk contoh silahkan perhatikan skrip 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 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: blue; -webkit-transition: width 3s,background-color 5s; /* Safari */ -webkit-transition-delay: 2s; /* Safari */ transition: width width 3s,background-color 5s; transition-delay: 2s; } div:hover { width: 400px; background-color: yellow; } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan dengan nama delay_transition.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
terlihat untuk proses transisinya terdapat delay 2 detik, baru terjadi transisi dari lebar dan juga warna dari objek.
Baik itu dulu sahabat warungbelajar yang bisa dibahas dalam tutorial mengenai fitur transisi dalam CSS3, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.
