Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.
Простой
