Hallo teman-teman?Pada tutorial kali ini saya akan membahas tentang bagaimana cara Membuat Efek Bounching Dengan @Keyframe CSS3.
Sebelum saya praktekan
penggunaan Efek Bounching Dengan @Keyframe CSS3, saya akan sedikit menjelaskan tentang apa itu @keyframe pada CSS3.

Menurut pengertian saya @keyframe pada css3 adalah suatu frame atau wadah yang menyimpan berbagai animasi objek dengan transisi yang halus, jadi kita dapat membuat suatu animasi didalam satu frame atau wadah.

nah untuk lebih jelasnya kita coba praktekan pada study case kali ini yaitu Membuat Efek Bounching Dengan @Keyframe CSS3, sekarang silahkan teman-teman buat sebuah file dan ketikan script html berikut ini :

Seperti biasa saya membuat sebuah div dengan saya berikan sebuah id contoh dan 2 class yaitu animasi dan bounce, jika sudah sekarang kita atur style CSSnya, untuk membuat animasi bouncingnya, silahkan teman-teman tambahkan script CSS seperti berikut ini :

saya mengantur class bonce dengan memberikan animation-name bonce, nah animation-name inilah yang nanti kita akan atur dengan menggunakan @keyframe, kemudian saya mengatur animation name bonce tadi dengan pengaturan transform pada waktu 40% selama jeda animasinya id contoh akan transform pada sumbu y -30px,

Begitu juga pada keadaan 60%,

Sehingga keseluruhan scriptnya dalah seperti berikut ini:

 

Jika sudah teman-teman silahkan save dan coba jalankan pada browser masing-masing, hasilnya akanseperti berikut ini :

membuat-efek-bounching-dengan-keyframe-css3-1

kotak diatas akan bergerak kearah atas bawah karena efek dari translateY yang kita berikan sebelumnya,

gimana teman-teman? cukup mudah bukan, sekian dulu untuk tutorial kali ini tentangĀ Membuat Efek Bounching Dengan @Keyframe CSS3 , selamat mencobanya dirumah, semoga bermanfaat,terimakasih .