CSS анимация перезапускается при перемещении анимации в другой div

Question

При изменении родительского элемента div все анимации css перезапускаются.

Можно ли анимировать div при изменении его родительского элемента без перезапуска анимации?Я хочу, чтобы rotateAnim примера воспроизводился только один раз.

Я также пытался использовать свойство animation-play-state и установить анимацию на # AnimatedElement ,Также не работает.

скрипка

Анимация:

#AnimatedElement.animate {
    animation: rotateAnim 6s forwards;
}

Запуск анимации:

const element = document.getElementById("AnimatedElement");
element.classList.add('animate')
setTimeout(_=> {
    const newParent = document.getElementById("parent2");
    newParent.appendChild(element);
}, 2000) // change parent element while animation is still running

Answer 1

Нет, это невозможно.Как только вы измените родительский элемент, движок браузера пересчитает стиль / макет.Одним из возможных решений вашей проблемы является клонирование анимационного элемента, добавление клона в newParent при удалении оригинального AnimatedElement после завершения анимации.