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

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

https://jsfiddle.net/31v3u98L/

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

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

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