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.