Как правильно оформить переходы CSS?
событие ховер срабатывает только при наведении мыши на объект и когда вы "выходите" с объекта то стили для ховера мгновенно убираются и анимации не происходит. То что вы сейчас прописали верно.
Смотрите что происходит при transition на ховере
1) Вы наводите мышь на объект и у него появляются стиля для hover далее браузер видит "у меня появилось свойство transition нужно его применить" и применяет.
2) Вы убираете мышь с объекта и браузер убирает стили с hover при этом и убирает transition (он не выполняется)
Смотрите что происходит при transition не на ховере
1) браузер загружает стили и видит transition и при каждом изменении  opacity он будет выполняться вне зависимость от того при каком событии идёт изменение.
2) когда например вы убираете мышь с объекта сначала уходят ховер свойства а только потом  transition их анимирует! - это не происходит в событии ховер
Поставьте транзишен в блок к которому хотите его применить а также в :hover. Т.е. анимация будет срабативать при наведении а также, когда курсор уходит от "блока".