Почему не работает transition свойство?
Переключение display не даст возможность применять transition. Используйте, например, opacity.
Если хотите плавное изменение свойств при наведении (или другом состоянии) — не цепляйте transition к этому состоянию (например, к :hover в вашем случае), потому что как только состояние пропадёт (увели курсор с элемента), то произойдёт резкая смена значений.
Однако, если вам нужно плавное появление и резкое исчезновение, то вешать нужно как раз на :hover (или другое выбранное для появления состояние).
a:not(:hover) span {
Для плавной смены, когда курсор выведен за пределы div