Hallo teman-teman semuanya, kembali lagi dengan saya rizal pada tutorial dumet school, pada tutorial kali ini kita akan belajar tentang bagaimana Membuat Efek Delay Pada Transition CSS3, sebelumnya mungkin teman-teman ada yang sudah mengenal dan ada yang belum mengetahui apa itu transition atau transisi pada CSS, transisi adalah suatu animasi yang diberikan kepada sebuah element html yang dapat memberikan efek tertentu berdasarkan style yang kita buat.
penulisan transisi pada CSS biasanya dituliskan pada element yang akan kita beri efek, dan penulisan transisi itu sendiri adalah seperti berikut ini:
|
1 |
transition:all 0.5s ease-in |
nah sekarang kita akan implementasikan penggunaanya dalam studi kasus, silahkan teman-teman buat sebuah file html dan ketikean script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>transition</title> </head> <body> <div></div> </body> </html> |
Sebagai contoh disini saya menggunakan element div yang nanti kita akan berikan efek transisi, nah sekarang silahkan teman-teman tambahkan script CSS berikut ini:
|
1 |
div {width:100px;height:100px;background:#A43D3F;transition:all 0.5s ease-in} |
script diatas seeperti biasa saya mengatur tinggi dan lebar serta warna pada element div tersebut, lalu saya menambahkan sebuah propertis transition dengan nilai all 0.5s ease-in, dimana all itu adalah default dari transisi itu sendiri dan 0.5s adalahrentan waktu transisinya serta type transisinya yaitu ease-in, jika teman-teman save hasilnya akan seperti berikut:
hasilnya hanya kotak seperti biasa, nah sekarang kita tampahkan script berikut ini pada cssnya:
|
1 |
transition:all 0.5s ease-in 2s |
saya menambahkan nilai 2s setelah efek ease-in, yang berarti bahwa ada selang waktu selama 2 detik sebelum efek transisi itu berjalan, jadi pada konsepnya setelah 2 detik baru efek teransisi itu berjalan, sekarang coba tambahkan pengaturan CSS lagi mengenai efek hovernya, silahkan tambahkan script css berikut ini:
|
1 |
div:hover{transform:rotate(160deg)} |
Saya mengatur style div setelah dihover akan melakukan transform yaitu berputar sebanyak 160deg, untuk kelengkapan scriptnya adalah sebagai berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> div {width:100px;height:100px;background:#A43D3F;transition:all 0.5s ease-in 2s} div:hover{transform:rotate(160deg)} </style> </head> <body> <div></div> </body> </html> |
silahkan teman teman jalankan pada browser masing-masing dan coba hover pada bagian element divnya dan lihat apa yang terjadi,
oke teman-teman untuk tutorial kali ini cukup sampai sini dulu, silahkan praktekan dirumah, semoga artikel kali ii bermanfaat, terimakasih.