Плавность исчезновения анимированного через @keyframes элемента?

Question

[Джон Голт]

Есть такая анимация:

@keyframes fadeEl 
	0% 
		opacity: 0
		transform: translate(0, 10px)
	50%
		opacity: 1
		transform: translate(0, -10px)	
	100%
		opacity: 1
		transform: translate(0, 0)

Далее, когда навожу на элемент, она соответственно выполняется:

&:hover .tab-search
		animation: fadeEl .3s ease forwards
		animation-delay: .3s

Но, когда курсор с родительского элемента (при наведении на который вызывается анимация для элемента о котором идет речь) уводится, дочерний, анимированный мною элемент исчезает не плавно, а резко, без перехода. Вопрос: как сделать это обратное исчезновение при уведении курсора плавным ?