Interruptible motion

Open a side panel and reverse it mid-motion: keyframes, input-locked transitions, and ordinary CSS transitions.

001 · MotionSupportedStarted 2026-10-01 · updated 2026-10-03

Demo width

Full768375

Loading demo…

Principles

Rapidly successive state changes must remain interruptible: motion should reverse from its current position instead of jumping or ignoring input.

EmpiricalBaudisch et al. (2006)Animated transitions force users to wait; immediately showing the outcome allows interaction to continue without a delay.
TheoryHutchins et al. (1985)Direct manipulation requires objects to behave like themselves; a moving physical object can be reversed at any time.
TheoryChang & Ungar (1993)Objects that enter and leave smoothly are easier to follow than objects that appear or disappear abruptly; positional jumps are abrupt changes.

Hypothesis

If an opening panel is reversed during its animation, a CSS transition should reverse smoothly from its current position, while @keyframes jumps to the endpoint of a new animation and input locking leaves the panel open.

Measured by: Sample the panel's position every frame. Reverse it in two trials: when the panel first reaches half-open, and at exactly half the animation duration. Record initial-frame movement, largest wrong-way step, reversal delay, and final state.
Falsified if: Falsified if the transition moves the wrong way or fails to reverse on the next frame, or if keyframes does not have more wrong-way movement than the transition.

Implementation

A · Keyframes: Separate entering and exiting @keyframes. Each reversal starts a fresh animation from an endpoint.
B · Input locked: CSS transition that ignores input until completion, the common isAnimating pattern.
C · Transition: CSS transform transition that reverses immediately from the current value.

All three lanes receive identical commands from one button, so only the animation implementation differs. Duration is 300 ms, easing is cubic-bezier(0.22, 1, 0.36, 1), and only transform is animated.

The instrument instantly closes every panel, starts an opening transition, then reverses it in two separate trials: the first frame when it is at least 50% open, and the first frame after 50% of the duration. Position is sampled using getBoundingClientRect on each requestAnimationFrame.

The initial instrument only reversed at 50% duration and counted frame-to-frame jumps. With this easing the panel was already 96% open, so the large first ease-out step appeared as a jump and made keyframes and transitions look identical (24%). The metric was changed to wrong-way movement and a second reversal point was added.

With prefers-reduced-motion: reduce, all variants use zero duration. A 5× Slow option helps users observe the motion visually.

Observations

Reversed when half open

Reverse on the first frame when the panel is at least 50% open (50 ms, 60% position). Three runs at 1280 px and one at 375 px; between-run variation was no more than one percentage point.

Chromium 154 (Playwright, headless), 60 Hz, 2026-10-01, 1280×900 and 375×900

Variant	First frame after reversal	Largest wrong-way step	Starts closing	Final state
A · Keyframes	+16 %	+40 %	33 ms	closed
B · Kunci input	+12 %	+12 %	never	open, 1 input ignored
C · Transition	−22 %	0 %	17 ms	closed

Keyframes jumped 40 percentage points (from 60% to 100%) in one frame and began closing only 33 ms later. Input locking discarded the close command, letting the panel finish opening. The transition reversed on the next frame without moving the wrong way.

Reversed at 50% of duration

Reverse on the first frame after 150 ms. At that point the panel is already 96–98% open.

Chromium 154 (Playwright, headless), 60 Hz, 2026-10-01, 1280×900 and 375×900

Variant	First frame after reversal	Largest wrong-way step	Starts closing	Final state
A · Keyframes	−20 %	+2–4 %	17 ms	closed
B · Kunci input	+1 %	+1 %	never	open, 1 input ignored
C · Transition	−24 %	0 %	17 ms	closed

Because ease-out had already covered almost all the distance, the keyframes jump was only 2–4 percentage points and barely noticeable. Input locking still discarded the last command.

Reduced motion

Repeat the same trial with prefers-reduced-motion: reduce emulated.

Chromium 154 (Playwright, headless), 60 Hz, 2026-10-01, 1280×900

Variant	Duration	Starts closing	Final state
A · Keyframes	0 ms	0 ms	closed
B · Kunci input	0 ms	0 ms	closed
C · Transition	0 ms	0 ms	closed

With a duration of 0, all three variants behaved identically: there was no motion to interrupt, and the input lock no longer blocked commands because motion finished instantly.

Cross-browser replication: both reversal points

Run the same Measure instrument through Playwright: open the demo, measure actual rAF interval across 60 frames, click Measure, and read the result table. Three trials at 1280 px and one at 375 px per engine; tabulated ranges include both engines and all trials. rAF intervals were 16.66–16.95 ms (approximately 60 Hz).

Firefox 155 and WebKit 26.6 (Playwright, headless), 60 Hz, 2026-10-03, 1280×900 and 375×900

Reversal point	Variant	First frame after reversal	Largest wrong-way step	Starts closing	Final state
Half open	A · Keyframes	+16–17 %	+40 %	33–34 ms	closed
Half open	B · Kunci input	+12 %	+12 %	never	open, 1 input ignored
Half open	C · Transition	−21–23 %	0–1 %	16–18 ms	closed
50% duration	A · Keyframes	−19–23 %	+2–4 %	16–18 ms	closed
50% duration	B · Kunci input	+1–2 %	+1 %	never	open, 1 input ignored
50% duration	C · Transition	−23–25 %	0 %	16–18 ms	closed

Chromium's pattern replicated in both engines: keyframes jumped 40 percentage points when half-open and 2–4 points at 50% duration; input locking always dropped the close command; transitions reversed on the next frame. Two small deviations (C +1% in one Firefox run; B +2% in one WebKit run) were within the original ±1-point between-trial tolerance.

Cross-browser replication: reduced motion

Repeat the experiment with prefers-reduced-motion: reduce emulated, one run per engine at 1280 px.

Firefox 155 and WebKit 26.6 (Playwright, headless), 60 Hz, 2026-10-03, 1280×900, reduced motion

Variant	Duration	Starts closing	Final state
A · Keyframes	0 ms	0 ms	closed
B · Kunci input	0 ms	0 ms	closed
C · Transition	0 ms	0 ms	closed

Both engines matched Chromium: with duration 0, all variants were immediate and there was no motion to interrupt.

Findings

Supported

CSS transitions reversed from their current position without a single frame moving the wrong way at either reversal point or viewport width. The two failing approaches behaved differently: @keyframes jumped to the new animation endpoint (40 points when reversed halfway, only 2–4 near the end of ease-out), while input locking always failed because the latest user command was discarded and the panel ended in the wrong state.

Limitations

Chromium 154, Firefox 155, and WebKit 26.6 headless at roughly 60 Hz; real Safari/Firefox, physical devices, and 120 Hz screens were not tested.
One easing curve (cubic-bezier(0.22, 1, 0.36, 1)) and one duration (300 ms). With linear or ease-in curves, keyframe jumps at 50% would be much larger.
JavaScript-driven animation (springs, Web Animations API reverse()) was not evaluated.
The instrument measured position, not user perception.

Evaluation

Usability: One button drives all three lanes simultaneously, making differences visible without switching variants. At 300 ms, the keyframes jump is easy to miss; the 5× Slow option, table, and chart make it observable.
Accessibility: Native labeled button and checkbox; measurements announced through a polite live region; chart has textual summary and differentiated line patterns. All variants are instantaneous under reduced motion. axe-core 4.10 found zero violations in light/dark modes at 1280 and 375 px.
Responsive: Lanes adapt to demo width. Results matched at 375 and 1280 px, with no horizontal overflow.
Performance: Only transform is animated. The demo loaded approximately 154 KB of compressed JavaScript, around 15 KB more than the homepage; the demo is a separate chunk.
Craft: Lanes look like miniature side panels with shadows, not abstract boxes, to make jumps recognizable as UI behavior. The instrument discards results if the tab is hidden during measurement.

Area: Motion