Animated Search Icon to Input Field Transition

Image: Animated Search Icon to Input Field Transition GIF

When you click on this search icon it morphs into an input field that you enter your search query in, it also shows an “x” at the end of it that you can click on to close the search box and reveal the search icon. It was designed by Wayne Dunkley.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Nearly CSS3 Animated Search Input by Wayne Dunkley (@waynedunkley) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.