Perkenalan Animasi dan Keyframes Pada CSS3

Sekarang kita akan melakukan animasi dimana kita akan mulai membuat keyframenya caranya sangatlah mudah teman teman menuliskan @keyframes lalu akan diikuti nama animasinya mau apa. Untuk nama animasinya itu bebas saya akan berikan nama bouncy sebagai berikut

lalu didalamnya akan ada keyframe dan Jika hanya dua keadaan saja maka teman teman  tambahkan from sebagai keadaan awalnya lalu to sebagai keadaan akhirnya.

jadi disini saya sudah punya keyframes dari animasi yang akan siap digunakan dan jika kita simpan kodenya lalu dijalankan maka browsernya tidak akan terjadi apa apa karena animasinya baru saya siapkan belum saya gunakan. Cara menggunakannya kita akan gunakan property animation diselector yang ingin diberikan animasi. Misalnya kita berikan animasinya ketika elemennya dihover

nilai pertama tentukan nama animasinya dan nama animasinya harus sama dengan keyframes yang dibuat. lalu yang kedua adalah durasinya mau berapa dan selanjutnya timing functionnya kita berikan ease. Saya arahkan kursornya maka elemennya akan melakukan perpindahan dari atas kebawah. Ketika perpindahannya sudah selesai maka otomatis akan kembali keposisi semula. itu yang sederhananya nanti nilai-nilai yang bisa kita berikan pada property animation ada banyak pada bagian berikutnya kita jelaskan satu persatu.