Как проиграть анимацию в обратном порядке при отведении курсора?

Question

[Дмитрий Яковлев]

Есть анимация выплывающего блока, построенная на keyframes, при наведении она срабатывает, но если курсор убрать - положение блока становится изначальным, а надо, чтобы анимация проиграла в обратном порядке, как этого добиться?
Спасибо.
Код:
https://jsfiddle.net/4bwux4L0/

При наведении на блок - он плавно перемещается, но если убрать курсор - резко вернется начальная позиция, а мне надо, чтобы он также плавно переместился в начало.

Answer 1

[spike__x]

Можно через animation
или через hover

Comments

[Дмитрий Яковлев]

Я наверное не так выразился, вот код анимации - https://jsfiddle.net/4bwux4L0/
При наведении на блок - он плавно перемещается, но если убрать курсор - резко вернется начальная позиция, а мне надо, чтобы он также плавно переместился в начало.

[spike__x]

Дмитрий Яковлев: Так подойдет? https://jsfiddle.net/wzve3uxb/

Answer 2

[Анатолий]

Можно сделать вообще без animation.