Bentuk Penulisan Keyframes Animation CSS3

Hai semuanya melanjutkan materi mengenai CSS3 kali ini kita akan membahas CSS animation dimana kita tahu kita bisa melakukan animasi dengan dua cara. Cara pertama kita bisa menggunakan transition dan cara kedua dengan menggunakan property animation. Tapi dengan animation ini kita akan punya beberapa keadaan tidak seperti transition yang hanya ada dua keadaan yakni keadaan awal dan keadaan akhir. Dengan menggunakan animation akan ada yang namanya keyframes dimana kita bisa membuat beberapa keadaan diantaranya dengan bantuan banyak keyframes. Intinya animation ini ada pada keyframes. Untuk membuat keyframes bentuk penulisannya sebagai berikut

@keyframes lalu nama animasinya mau apa. Lalu didalam keyframesnya akan ada keadaan awal sebagai from sedangkan to sebagai keadaan akhir walaupun nanti kita juga bisa ubah menggunakan persen(%) supaya keyframes atau keadaannya bisa banyak. Kita akan langsung buat halaman HTMLnya cukup sederhana lalu didalamnya akan ada satu buah elemen yang saya berikan class box

yang nantinya kita akan coba animasikan. Kemudian akan ada sedikit style CSS yang saya  berikan lebar tinggi dan backgroundnya agar elemen terlihat bulat maka kita tambahkan border-radius 50% sebagai berikut

hasil akan terlihat seperti ini.

dimana pada bagian selanjutkan kita akan coba animasikan dengan memindahkan elemennya kebawah dan keatas secara vertical. Jadi animasinya seperti bola yang memantul. Terima kasih.