Mikko MetsoI'm a coder, this is my blog


Daily trainings: Simple Search Bar animation

February 16, 2020

  • en /
  • css /
  • training /
  • CodePen /
  • css-animations /

Little animation goes a long way

I’m a Front-End Developer so the bread and butter in my daily work is to write semantically strong HTML and CSS.

Technically because I work with Typescript, ReactJs and styled-components what I might be writing at work can be for example JSX, or TSX or styled-component template literals. So almost everything is JavaScript but the syntax is almost all the time similar to HTML and CSS and the results will be presented on browser as such.

So I’m always trying to improve these cornerstone skills for developer and these tiny doodles are all for that. Basic leg work that helps me become a better coder in the long run.

This time I decided to recreate this simple and in my oppinion beautiful way to indicate the focused input by resizing it a bit with css animations when clicked.

All of my CodePens can be found here.