Animate input placeholder text on ::focus

A CSS Trick for animate input placeholder text

Hi!!! Today I’m gonna teach you a simple CSS trick to make beautify an input box.

Here is the simple body tag code snippet.

Now will do some basic setup for the body. you can follow the bellow code snippet

Yah!! now will do some arrangements for the .input-form container. So, that it acts like “form-group” in the bootstrap.

If you observer the above snippet, we are considering the variable input_height and input_color with 50px and #f73378. The input_height used to maintain the input box height and also used it for top padding and translate purpose for the next coming sections.

Now will add some CSS properties for the .input-field(input box)

Next, will fix position of the .input-label and .label-name. Here we gonna fix the position of the label to bottom and left. so that initially it appears on bottom of the input. After we do focus, on the input box the will make some animation to slide up the label in next section. Here you go for positioning the labels fist!!.

All set for real magic!!!

To set, bottom border animation from left to right 100% line with linear motion. First will make it as zero width content with using ::after pseudo class.

And before the animation of transition will do unset the border-bottom when the input having :focus and :not(:placeholder-shown). So that, basic border will disappear while we do focusing and having some valid input value.

Time to animate our bottom border with some 200ms transition. It give nice effect to the border line in linear motion.

You got the effect, i guess!!! will do some real fun with label slide up animation by making smaller font size and transforming the label to slide up to the top of the input box with simple snippet.

Finally!!!

we do some center positioning the entire form with following snippet

That’s It!!!!

Hope you guys enjoyed the post!!!. will come back with more stuff on pseudo classes on next article :)