Задать вопрос

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

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

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

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

Как можно реализовать?
  • Вопрос задан
  • 154 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега CSS
Убрать классы hand-* (и, соответственно, js-код, который эти классы переключает), убрать keyframes.

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

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

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

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

Всё.
Ответ написан
Комментировать
imko
@imko
Senior Scratch Developer
не нужен тут animation, просто транзишон укажи и трансформ на ховер сделай
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы