Почему transition не создает плавной анимации?

Question

[TreeFall1]

У меня есть блок с обводкой

.card{
    outline: 1px solid #757575;
    transition: 250ms;
}

Я хочу что бы при наведении на этот блок толщина обводки становилась больше:

.card:hover{
    outline: 2px solid #757575;
}

В итоге вместо плавной анимации увеличении толщины, я вижу как толщина резко изменяется через 250ms, а не в течении 250ms. В чем проблема?

Comments

[Алексей Уколов]

transitiob

?

[TreeFall1]

Алексей Уколов, руками переписывал, опечатка. Свойство правильно указано в коде

[Виталий Першин]

поставь для примера 20 пикселей вместо 2 и поймешь почему

Answer 1

[DIVSIDE]

transitiob: 250ms;

А надо N. И ставить его надо в оба класса, чтобы при уводе мышки, плавность была и назад

Comments

[TreeFall1]

Это просто опечатка. Я уже поменял в вопросе на transition. Пробовал ставить в оба класса и это проблемы не решило

[DIVSIDE]

Плавность происходит, просто у вас разница буквально 1 пиксель - поэтому вы этого не видите. Оно милипиздрическое

[TreeFall1]

DIVSIDE, ну вопрос надо внимательней читать. Я не сказал, что изменений не происходит. Они есть, но нет плавности. Спустя 250ms просто резко меняется толщина обводки

[DIVSIDE]

TreeFall1, А вам надо читать внимательнее ответ и перестать быть токсичным чудилой. Еще раз, для невнимательных:
У вас дефолтное состояние 1пх, а при ховере 2пх. У анимации просто нет лишних пикселей для "разгона". Любая анимация это поэтапное движение. А при разнице в 1пх - там всего 1 этап. Поставьте 3 и увидите разницу. А потом 4, потом 5. И глядишь, дойдет наконец что надо быть уважительнее

[imko]

DIVSIDE, в ховере лишнее объявление transition