v133 · dom
Animation Continuity
CSS animations do not reset when an element is moved with moveBefore() — the spinning orb, sweep bar, and colour gradient all pick up exactly where they left off. appendChild() forces a style recalculation that resets every animation to its starting position.
Feature detection: checking…
Three CSS animations — move the card between slots
card is in slot A
Slot A
Animated component
orbit: 0 iterations
Slot B
Move log
0msCard initialised in slot A — animations running
appendChild() — resets all animations
The browser detaches the element, destroying its rendering context. When it's reattached, the CSS cascade fires again from scratch. Every
animation restarts at iteration 0, time 0. You lose the spinner's position, the bar's sweep progress, and the gradient offset.moveBefore() — animations continue uninterrupted
The element stays connected to the rendering pipeline. The computed style doesn't change, the animation timeline is preserved. The orb keeps spinning from exactly where it was. There is no visual jank on reparent — critical for drag-and-drop UI.
/* Three CSS animations running on the card */
.spinner-orb { animation: orbit 1.2s linear infinite; }
.progress-bar { animation: sweep 3s ease-in-out infinite alternate; }
.colour-pulse { animation: shift-bg 2s linear infinite; }
/* appendChild: all three reset to t=0 on move */
slot.appendChild(card);
/* moveBefore: all three continue from current t */
slot.moveBefore(card, null);
/*
moveBefore(node, referenceNode)
- node: the element to move
- referenceNode: insert before this child, or null to append
Same signature as insertBefore — but preserves state.
*/