Почему transition работает не правильно с outline?

Question

[Вова Будняк]

При Transition:0.3s outline появляется сразу, а цвет меняется плавно.
https://jsfiddle.net/dhLz3yvy/1/

Comments

[Степан Крапивин]

сделай изначальное значение outline: 1px solid transparent; тогда будет переход от прозрачного до green.

Answer 1

[0xD34F]

Всё работает правильно.

Не задумывались над вопросом - а как можно "плавно" осуществить переход от нуля пикселей до одного? Никак. Возможных значений всего два, так что переход будет мгновенным. Вот если увеличить толщину, тогда да - выглядеть будет "плавно".

Answer 2

[Александр]

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

Answer 3

[sdgroup14]

потому что если я не ошибаюсь оутлайн является "косвенно" стилем... цвет выделения инпута и т.д. к нему транзишн не применяется. хотите красивый оутлайн - делайте через бордер

Answer 4

[irinkom]

Нужно задать первоначальный outline-color: transparent;