Как сделать обратный переход анимации?

Question

[goodcucumber]

Есть декорация для заголовка, которая появляется при наведении на него курсора, она же, по задумке, должна потом плавно исчезать, после убирания курсора. Но проигрывается только первая анимация, а вторая (обратная) не срабатывает.

Что изменить в коде, чтобы получить желаемое?

Код:
a:hover .title-decor{
animation: title-backlight 1s;
}
a:hover::after .title-decor{
animation: title-backlight-back 1s;
}
@keyframes title-backlight{
0%{
color:transparent;
}
100%{
color: #ffdd00;
}
}
@keyframes title-backlight-back{
0%{
color: #ffdd00;
}
100%{
color: transparent;
}
}

Answer 1

[goodcucumber]

Нашел ответ на свой вопрос здесь Через что делать анимацию при наведении курсора (hover): transition или @keyframes?