Penggunaan Keyframes Dengan Persen Pada CSS3

Pada bagian sebelumnya kita sudah memberikan keadaan awal sebagai from sedangkan keadaan akhirnya sebagai to. Teman teman juga bisa mengubahnya menjadi persen. Jadi kita mau mulai dari keadaan 0% dan diakhiri keadaan 100% dan dijalankan hasilnya tetap sama saja. Tapi teman teman bisa juga memberikan keadaan diantaranya bentuk penulisannya seperti berikut

penjelasan kode diatas pada keadaan 50% akan melakukan perpindahan kebawah secara vertical sebanyak 100px sedangkan pada keadaan 100% kita akan kembalikan keposisi semula. Ketika dijalankan saya arahkan mouse maka hasil yang didapatkan adalah elemen tersebut akan seperti bola yang memantul. Tapi proses animationnya akan terjadi sekali saja. Nah sekarang animasinya bisa saja saya tidak berikan pada saat di hover tapi saya simpan pada bagian class boxnya

maka otomatis animasinya akan terjadi ketika halamannya direload tanpa ada pemicu apapun. Teman teman juga dapat memberikan delay atau melakukan penundaan sebelum animasi itu dijalankan sebagai berikut

maka tunggu dulu 2 detik lalu animasi akan dijalankan. Nilainya hampir sama dengan penggunaan property transition. Itu dia mekanisme sederhana dari keyframes dan animation.Terima kasih.

18 Oktober 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat