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.

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat