Перезапуск анимации CSS3

Возобновление анимации CSS3 при взаимодействии с пользователем — распространенная задача. Хотя удаление и повторная вставка анимированного элемента может показаться эффективным, оно вносит ненужную сложность. Более совершенное решение возникает за счет использования возможностей перекомпоновки для плавного сброса анимации.

Перекомпоновка, процесс переформатирования и перерисовки структуры документа, предоставляет удобный механизм для изменения стилей без нарушения временной шкалы анимации. Кратковременно установив для свойства анимации значение «none», а затем запустив перекомпоновку, браузер получает сигнал игнорировать любую выполняемую анимацию. Это позволяет последующим изменениям стиля немедленно вступить в силу, фактически перезапуская анимацию.

Для иллюстрации рассмотрим следующий фрагмент JavaScript:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

При срабатывании эта функция приостанавливает анимацию «анимированного» элемента, принудительно перерисовывает браузер, а затем восстанавливает свойство анимации в исходное состояние. Избегая задержек или цепочек назначений анимации, этот подход упрощает процесс сброса анимации, обеспечивая плавное визуальное восприятие.