Membuat animasi pada kolom input text

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan satu trik tentang HTML CSS, yaitu mengenai cara membuat animasi pada kolom input text.

Pada CSS3 memang sudah disediakan fitur animasi yaitu dengan menggunakan keyframe untuk menyusun rangkaian animasi.

Pada kali ini saya akan membuat sebuah animasi yang akan diterapkan pada sebuah kolom input text

Pertama, kita buat dulu HTML seperti berikut

 

Lalu sekarang kita akan mengatur jalannya animasi dengan keyframe rule seperti dibawah ini

 

Selanjutnya hanya dengan menambahkan sedikit css dan memanggil keyframe pada propertynya

 

dan tambahkan sedikit property untuk hover dan focus form nya

 

Baiklah, untuk demo hasil dari cara membuat animasi pada kolom input text ada dibawah ini

 

25 Juni 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