Как сделать такую же анимацию,но через animation?

Question

[zhrjnnrdzjj]

https://codepen.io/geharka/pen/bGRVwVb

Нужно сделать так же работающую анимацию,но используя свойство animation.
Важно,чтоб при отсутствии наведения анимация возвращалась с начальному положению плавно,как будто она инвертирована,и идет от конца к началу.

Comments

[Вадим]

С чем у Вас возникла сложность?

[zhrjnnrdzjj]

Вадим, При убирании курсора с квадрата анимация мгновенно возвращается к начальному положению.А нужно, чтоб она делала это плавно.

Answer 1

[Григорий Моргачев]

Использовать две анимации
На hover и просто на элементе, чтобы вернуть его к исходному состоянию

Comments

[zhrjnnrdzjj]

Спасибо,но в таком решении есть две проблемы:
1. При наведении блок сначала увеличивается в ширину,а потом в высоту.А при убирании курсора с элемента сначала уменьшается ширина,а потом высота,а должно быть наоборот.
2. Если убрать курсор с элемента прежде,чем анимация кончится,то она мгновенно "прыгнет"в конец,а потом плавно вернется к начальному положению,а этого"прыжка" быть не должно,анимация должна просто вернутся в начальное положение.