CSS3 Animated Text Field – Quick and Easy

Animating different parts of a webpage has nearly became a trend. Modern websites tend to be more responsive in sense of giving beautiful visual feedback. There are some Jquery based animated text field libraries out there, but doing it with CSS is more cooler. Specially when CSS3 offers more robust and powerful APIs.

I recently went through a CSS inspirational library of animated text field at codrops. This library is experimental but if you know that majority of your visitors are using modern web browsers, then you can rely on it. Making your text fields animated will make your next project even more eye catchy.Animated Text Field - Yoko

The Markup:

Html markup of the input field is simple. In order to make a simple text field animated, you will have to go through following modifications:

  1. Wrap your text field in <span> with class name of the desired CSS effect.
  2. Then add your <input> text field tag. Again with the a specific class name.
  3. After <input> add a <label> tag. Its is used for the animation of text field on focus.
  4. Inside the <label> add a <span> tag to decorate and position the label of the text field.

Now you are done with the HTML. A typical markup for the above GIF of YOKO animated text field will be as follow.

<span class="input input--minoru">
    <input class="input__field input__field--yoko" type="text" id="animated-text-field">
    <label class="input__label input__label--yoko" for="animated-text-field">
        <span class="input__label-content input__label-content--yoko">City</span>

Be sure, that you will have to use the default HTML attributes for <input> and <label>. Like id and for.

The CSS:

There is not much to do with CSS. It is already well written with proper class names. All you have to do is to include the file in your HTML page. And then add the proper class names to <span>,<input>,<label> and again to the child <span>. Some GIF demos which I have captured are as follow along with the class names:

 1. Haruki

Animated Text Field - Haruki

  • <span>: input input–haruki
    • <input>: input__field input__field–haruki
    • <label>: input__label input__label–haruki
      • <span>: input__label-content input__label-content–haruki
2. Hoshi

Hoshi has following animation for text fields

Animated Text Field - HoshiJust replace haruki with hoshi at the end of all class names.

3. Kuro

Animated Text Field Kuro

Same as hoshi,replace with kuro

The best thing about these animated text fields is that you can easily implement them. They are easy to switch and are more dependent on CSS. Though if you are using some jQuery library like Live Search Plugins then there are chances that things can get messy.

Also, if you don’t have adequate space to accommodate the animated text field in width and height as coded by the developer then there is probability of poor readability and animations. So try to use them on roomy pages like Login Page.

You can download the library from GitHub. If you are interested in more technical details then you can read the article on the author website above. There are about 26 animated text field effects to choose from. So download the library, experiment with it, use it and let me know if it helps : )


One thought on “CSS3 Animated Text Field – Quick and Easy

Leave a Reply