Css получает обратную анимацию при наведении курсора [дубликат] ⇐ CSS

[Anonymous]

У меня есть простая CSS-анимация, которая расширяет полосу при наведении на ссылку. Анимация работает нормально при наведении. Но при снятии с зависания он возвращается обратно. Есть ли способ сделать анимацию обратной при выходе из элемента с помощью мыши?

Код: Выделить всё

.heading-decoration {
height: 10px;
width: 50%;
background: linear-gradient(to right, #e31e24 70%,
#e31e2567);
}

span:hover .heading-decoration {
animation: heading-decoration-animation 0.3s ease-in-
out;
width: 100%;
background: linear-gradient(to right, #e31e24 100%,
#e31e2567);
}

@keyframes heading-decoration-animation {
from {
width: 50%;
background: linear-gradient(to right, #e31e24 70%,
#e31e2567);
}
to {
width: 100%;
background: linear-gradient(to right, #e31e24 100%,
#e31e2567);
}
}

Код: Выделить всё

[url=#]Home[/url]
 

https://jsfiddle.net/rx1agv5L/

Подробнее здесь: https://stackoverflow.com/questions/791 ... dehovering