v139 · css

Race Track

Launch five racers simultaneously, then change the transition duration mid-flight by clicking "Swap duration". In Chrome 139+, in-flight racers finish at their original speed — the duration swap only affects new races started after the change. Pre-139 browsers would snap in-flight transitions. The event log shows no transitioncancel in the correct behaviour.

Feature detection: checking…
Transition settings
3s
0.8s
Race track — ready
Transition events
← Click "Launch all racers" to begin

Chrome 139 vs pre-139 behaviour

Pre-Chrome 139 (incorrect)

Switching transition-duration while a transition was in flight was treated as cancelling the existing transition and starting a new one. Racers that were mid-track would snap to the finish. transitioncancel fired unexpectedly.

Chrome 139+ (spec-correct)

Only newly started transitions use the new transition-duration. In-flight transitions continue with their original timing — duration, easing, and delay. transitioncancel only fires when the animated property itself changes. This matches Firefox and Safari.

/* Transition properties only affect newly started transitions */
.racer {
  transition-duration: 3s;     /* initial */
  transition-timing-function: ease-in-out;
}

/* Somewhere in the app, the duration changes mid-flight */
.racer {
  transition-duration: 0.8s;   /* new value */
}

/*
  Chrome 139+ spec behaviour:
  - In-flight transitions: continue with 3s, ease-in-out
  - New transitions started after: use 0.8s
  - No transitioncancel fired for in-flight transitions

  Pre-139 incorrect behaviour:
  - In-flight transitions: cancelled, snapped to end value
  - transitioncancel fired unexpectedly
*/

see also