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

scroll to top
%d bloggers like this: