Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?

Question

[Алексей Клёнин]

Есть задача, сделать плавную анимацию изображения, при наведении мыши на кнопку.
И при убирании курсора, необходимо чтобы изображение, также плавно возвращалось обратно.

Пробовал реализовать так: https://jsfiddle.net/AcAlekc/L6whd1ck/17/

В моём случае при наведении, всё работает как надо, а при убирании курсора, изображение резко возвращается в исходную позицию, а мне нужно чтобы это происходило также плавно, как при наведении.

Как можно реализовать?

Answer 1

[0xD34F]

Убрать классы hand-* (и, соответственно, js-код, который эти классы переключает), убрать keyframes.

Задать элементу с изображением длительность смены состояния:

.btn::after {
  transition-duration: 1s;
  ...
}

Указать, как должно измениться состояние при наведении курсора:

.btn:hover::after {
  transform: translateX(30px) translateY(-40px);
}

Всё.

Answer 2

[imko]

не нужен тут animation, просто транзишон укажи и трансформ на ховер сделай