Kali ini saya akan bermain membuat Animasi Quick Search dengan css dan javascript. Terinspirasi dari konsep desain dari link ini.

Seperti yang dilihat pada gambar diatas, css yang digunakan untuk animasi slide pada input text, menggunakan transform translate.

Download Sample di Artikel Paling Bawah.
transform: translateX(xx); /* xx adalah value dari property */

Tanpa cerita terlalu panjang langsung aja berikut ini preview hasilnya.

See the Pen Quick Search CSS Animation by Lufti Nurfahmi (@luftinur) on CodePen.default