Чтобы остановить анимацию в CSS, можно использовать свойство animation-play-state.

Например, если вы хотите остановить анимацию для элемента с классом my-element, вы можете использовать:

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

Это свойство управляет состоянием анимации при помощи значения paused или running. Если установить значение paused, то анимация остановится в текущей точке своего выполнения, соответственно, при установке значения running, анимация будет продолжаться с места, где она была остановлена.

Чтобы возобновить анимацию, можно изменить свойство на значение running:

.my-element {
  animation-play-state: running;
}

Если анимация применена к псевдоэлементам, таким как :hover или :focus, то play-state наследуется от родительского элемента. Чтобы разрешить анимацию для этих псевдоэлементов, используйте отдельные анимации или определите свойство animation-play-state для каждого псевдоэлемента.

Например, так можно определить свойство для псевдоэлемента :hover:

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