Transition "ease-in-out" not working on text input focus border

Question

transition: all .2s ease-in-out; is not working on focus for my text input field.

What I want it to do is that when you focus a text input field, a black border fades in, vice-versa when you unfocus it.

This is my css:

#game-pin > input:focus {
  outline: none;
  border: 2px solid black;
  transition: all .2s ease-in-out;
}

I've tried putting transition: all .2s ease-in-out; into #game-pin itself to no avail. I've also tried transition: border .2s ease-in-out; instead, but it still doesn't work.

I can't seem to find any similar issue on the internet, so I thought it would be a problem on my browser. However, I tested this out on Opera, Google Chrome, Internet Explorer, Firefox, Safari and Microsoft Edge, with all of them refusing to ease-in-out that border for me.

Any help would be appreciated, Thanks!

Answer 1

Define a border with transparent color, and change the border-color on focus.

Note: if you want the effect to appear on blur as well, move the transition to the definition of the input.

input {
  transition: all 1s ease-in-out; /* changed the timing to show the effect */
  border: 2px solid transparent;
  background: lightgrey;
}

input:focus {
  outline: none;
  border-color: black;
}

<input placeholder="click here">