Как приостановить анимацию по ключевым кадрам, когда они не зависают

У меня есть анимация по ключевым кадрам для перемещения позиции маски, которая применяется при наведении курсора на кнопку. Но когда я перестаю навести на нее курсор, позиция маски сбрасывается на 0, что делает переход немного странным.

Следующие ключевые кадры:

@keyframes waving-mask {
  0% {
    mask-position: 0% 0;
  }
  100% {
    mask-position: 100% 0;
  }
}

Как запустить анимацию при наведении курсора и сделать паузу прямо в позиции ключевого кадра, когда я перестану навести курсор на элемент?


css performance css-animations keyframe
person Aftar Fadilah    schedule 07.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел ответ, наведение animation было неправильным подходом. Вместо этого поместите анимацию в класс, а затем добавьте

animation-play-state: paused;

Затем добавьте следующее в псевдокласс наведения

animation-play-state: running;

Подробнее о animation-play-state

person Aftar Fadilah    schedule 07.02.2019