1. Использование CSS-перехода. Вы можете использовать свойство CSS transitionдля создания анимации, а затем остановить ее при наведении курсора, установив для transition-durationзначение 0 сили нет. Например:

.element {
  transition: property duration timing-function;
}
.element:hover {
  transition-duration: 0s;
}

2. Использование анимации CSS. Если вы используете анимацию CSS, вы можете приостановить анимацию при наведении курсора, используя свойство animation-play-state. Установите для него значение pauseпри наведении курсора на элемент. Вот пример:

.element {
  animation: animation-name duration timing-function;
}
.element:hover {
  animation-play-state: paused;
}

3. Использование JavaScript. Другой подход — использовать JavaScript для добавления и удаления класса при наведении курсора, который управляет анимацией. Вот пример использования jQuery:

$('.element').hover(function() {
  $(this).addClass('paused');
}, function() {
  $(this).removeClass('paused');
});

.element.paused {
  animation-play-state: paused;
}

Это всего лишь несколько способов остановить анимацию при наведении курсора мыши с помощью CSS и JavaScript. Вы можете выбрать тот, который лучше всего соответствует вашим потребностям.