Как я могу плавно вернуть анимацию в CSS? ⇐ CSS

[Anonymous]

У меня есть простой текст CSS, который меняет свое положение и толщину шрифта при наведении на него курсора:

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

@keyframes boldenize{
0%{font-weight: 300; transform: translateX(0px)};
100%{font-weight: 900; transform: translateX(20px)};
}

@keyframes unboldenize{
0%{font-weight: 900; transform: translateX(0px)};
100%{font-weight: 300; transform: translateX(0px)};
}

И CSS текста:

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

.text{
animation: unboldenize .8s cubic-bezier(0,.29,.22,.99);
animation-fill-mode: forwards;
cursor: pointer;
margin-top: 1rem;
}

.text:hover{
animation: boldenize .8s cubic-bezier(0,.29,.22,.99);
animation-fill-mode: forwards;
}

Когда я перестаю наводить на него курсор, он воспроизводит анимацию «разблокирования», где (почти) плавно возвращается в исходное состояние.
Однако у меня есть две небольшие проблемы; как я могу воспроизвести анимацию «отмены Болденизации» только после того, как я навел курсор на текст (а не когда страница завершает загрузку), и как я могу сделать так, чтобы анимация «отмены Болденизации» начиналась в конце анимации «Болденизации»? Например, если анимация «выделения жирным шрифтом» не завершилась из-за того, что пользователь недостаточно долго наводил курсор на текст, я хочу, чтобы анимация «отменивания жирности» использовала текущую толщину шрифта текста в качестве условия 0 % (параметр преобразования уже определен).
Заранее спасибо за помощь

Подробнее здесь: https://stackoverflow.com/questions/798 ... hly-in-css