Why does transition not work correctly with outline?

Question

css

With Transition:0.3s, the outline appears immediately and the color changes smoothly.
https://jsfiddle.net/dhLz3yvy/1/

Answer 1

Everything works correctly.
Didn't think about the question - how can you "smoothly" make the transition from zero pixels to one? No way. There are only two possible values, so the transition will be instantaneous. Now, if you increase the thickness, then yes - it will look "smooth".

Answer 2

https://jsfiddle.net/dhLz3yvy/3/

Answer 3

because if i'm not mistaken the outline is "indirectly" the style... the highlight color of the input, etc. transition does not apply to it. if you want a beautiful outline - do it through the border