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.

16 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