How to make animation at input?

Question

css

How to make it so that when you click on the input type="text" its border (when focused) increases, and then the border decreases (when not in focus)?
https://www.dropbox.com/s/y01sfnevohlou9g/Untitled...

Answer 1

Dropbox - 403 error.
The question is incomprehensible.

Answer 2

border-bottom increased on focus?

Answer 3

Can be done simply:

input[type="text] {
border: 1px solid #555555;
}
input[type="text]:focus {
border-width: 2px;
}

But due to the fact that we increase the height and width of the object by 1px in each direction, it will jump. Therefore, it will be correct to wrap each input in a layer, set a border of 1px of the desired color for this layer.
And for the input, set the border to 1px of the same color as the background of the input, while on focus, change the color of the border of the input. See how it looks on the form: demo.lp-tricks.com