[Solved] Search form slow show [html] [closed]

by


To create such an effect you add a transition property for the width and the color of the input field. When the field has focus you simply change the width and color.

.animated-input {
    background: #000;
    border: none;
    border-radius: 5px;
    width: 40px;
    transition: width 1s, background 1s;
}

.animated-input:focus {
    background: #fff;
    width: 200px;
}

Here’s a jsfiddle:
https://jsfiddle.net/4v0z4tLL/

solved Search form slow show [html] [closed]