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