demo · v139
Live Transition Sandbox
Start a CSS transition, then interrupt it mid-flight by switching back to the initial value. In Chrome 139+ the transition continues smoothly. Toggle to “old behaviour” mode to see how it used to snap.
Mode:
Preset:
click box to start → click again mid-animation to interrupt
transition progress
—
what changed in Chrome 139
/* CSS */
.box { transition: all 0.8s ease; }
.box.expanded { width: 260px; }
/* JS — interrupt mid-flight */
box.classList.add('expanded'); // starts transition
// 300ms later, remove the class → property goes back to initial value
setTimeout(() => {
box.classList.remove('expanded'); // Chrome 139: transition CONTINUES
// Pre-139: transition SNAPS to initial
}, 300);