Как после анимации css скрыть блок от наведения (display:none) так чтобы это было красиво?

Здравствуйте,
Столкнулся с проблемой:
При наведении на метку справа от нее появляется блок, как сделать так чтобы этот блок был display none, затем при наведении он анимированного появлялся а затем при уходе курсора с этого блока или мышки он должен анимировано пропадать и затем переходить в display: none.

пример тут: map-8f9f12.webflow.io

Видео почему мне это нужно сделать: https://dl.dropbox.com/s/tzzw91b2i58o1ic/map-marker.mp4

(блок не пропадает и поэтому при наведении на него снова появляется)