Почему при уводе курсора анимация меняется моментально?

[mishapod]

В чем проблема?

https://jsfiddle.net/31v3u98L/

[Aetae]

Представляйте себе :hover как просто класс .hover, который ставится при наведении и убирается при уводе курсора соответственно.
Т.о. когда мышка убрана с элемена - убран и класс, а значит отсутствует и свойство transition как таковое. Никакой магии.
Надо делать так: https://jsfiddle.net/31v3u98L/1/

[рони]

mishapod,
у вас только наведение на блок анимировано, перенесите transition в строку 2

[mishapod]

Спасибо. Такой пустяк и такое простое решения.