v139 · css

Continue running transitions when switching to initial transition value.

When the transition related properties change, they are only supposed to affect newly started transitions. This means that if you change the transition properties, unless you also change the properties which have active transition animations, those transition animations will continue with the previously specified duration, easing, etc.

concepts

  1. Interruption Stability

    Previously, switching transition to its initial value mid-transition snapped the property to its final state. v139 lets the in-flight transition complete instead.

  2. Duration Swap Mid-Transition

    Change transition-duration mid-flight and watch the transition events log: no transitioncancel in v139+. Only changing the animated property itself should cancel.

  3. Transition Property Lab

    Three boxes, three policies. Tweak the before-transition duration/easing, the mid-flight switch values, and the switch-at offset; see the spec-compliant behaviour next to the pre-139 re-time and an untouched control. Telemetry shows actual finish times.

  4. Live Transition Sandbox

    Click a box to start a transition, click again mid-flight to interrupt — toggle between "Chrome 139 (continues)" and "Pre-139 (snaps)" modes to see the difference. Three animation presets: width, color fade, border-radius. A requestAnimationFrame progress bar tracks the in-flight position.

  5. Race Track

    Five racers launched simultaneously with identical start conditions. A "Swap duration" button changes transition-duration mid-flight — Chrome 139+ spec: in-flight racers finish at their original speed, new races would use the new duration. The event log shows no transitioncancel events for in-flight transitions, confirming spec-correct behaviour.

why it shipped

Canceling transitions is both inconsistent (i.e. we only cancel if transition is set to none, even though this is semantically equivalent to setting a 0 duration), and not correct to the spec. Safari and Firefox both implement this correctly now, forcing developers to need to carefully avoid triggering this edge case to get consistent behavior.

references