CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Manuel Perez
Manuel Perez

Reputation: 35

css animation restart when moving animated to another div

When changing the parent element of a div, all the css animations restart.

It's possible to animate a div while changing his parent element without restarting the animation? I want the rotateAnim of the example to only play once.

I have also tried using the animation-play-state property and setting the animation on the #AnimatedElement. Does't work either.

fiddle

Animation:

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

Start animation:

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

Upvotes: 0

Views: 306

Answers (1)

tungd
tungd

Reputation: 14897

Nope, it's not possible. Once you change the parent element the browser engine will re-calculate the style/layout. One possible solution to your problem is to clone the animating element, add the clone to newParent while removing the original AnimatedElement when the animation is finished.

Upvotes: 1

Related Questions