Why a reversal is more than “duration × elapsed time”
For the first linear trip from 0 to 100 px over 1000 ms, reversing at 250 ms yields a 0.25 factor. Returning with a declared 1000 ms duration takes 250 ms. With easing, CSS uses the eased value progress of the old transition, which can be very different from its elapsed-time fraction.
On another reversal, CSS also carries forward the old shortening factor and its logical reversing start. The new factor is clamp(abs(oldEasedProgress × oldFactor + 1 − oldFactor), 0, 1). The entire destination easing curve then runs over the shortened active duration. This can change velocity abruptly even when position is continuous.
Use the result in your CSS workflow
- Set the two translateX values and the initial state.
- Enter the duration, delay and easing declared in each destination state.
- List observed target changes in strictly increasing milliseconds.
- Inspect Before/After values, shortening factors and sample times. The numeric chart retains source overshoot.
- Download a report or the standalone HTML/CSS reproduction. Its actual browser playback logs timer callbacks and can differ from requested event times.
Supported scope and precision
This calculator models a single continuous scalar between two fixed translateX endpoints. It assumes each explicit target change is observed as its own style change and that destination timing settings remain fixed. It is not a full CSS engine: cascade, layout, simultaneous updates, discrete properties, steps easing, changing timing settings, multiple properties, emitted transition events and motion-preference overrides are outside its scope. Position sampling is mathematical; the tool does not claim exact wall-clock rendering. The plotted curve is a sampled diagram that includes phase boundaries, event discontinuities and easing extrema, so a brief transition in a long timeline retains its correct start and end times. Inspect time values and reports for numeric results.
The track is normalized for readability. Reports and the exported CSS use raw pixel values; the reproduction adds only a static left offset around the raw translateX. Negative delay can create a position discontinuity at a target change. JavaScript floating-point arithmetic and numerical Bézier inversion are used; JSON/CSV retain computed Number precision.
Worked scenarios
- Linear quarter reversal. At 250 ms: value 25 px, reversal factor 0.25, reverse active duration 250 ms; at 375 ms: 12.5 px.
- Repeated linear reversals. Second reversal factor is 0.875, not 0.125. At 812.5 ms the value is 56.25 px.
- Reverse during positive delay. No motion has started at 100 ms. Current value already equals A, so the pending transition is canceled.
- Positive reverse delay is retained. Factor 0.25 gives 200 ms active duration, plus the full 200 ms delay. At 550 ms: 12.5 px.
- Negative reverse delay is shortened. Factor 0.25 gives 250 ms active duration and −50 ms delay. The value immediately becomes 20 px at the reversal.
- Negative entry delay. Entry begins 20% progressed. At 100 ms: 30 px, reversal factor 0.3 and 300 ms reverse duration.
- Completed transition resets shortening. Entry has finished before 1200 ms. Return starts with factor 1 and the full 1000 ms duration.
- Asymmetric destination durations. 25% entry progress multiplies the destination A duration: 400 × 0.25 = 100 ms.
- Ease-in-out midpoint. The symmetric Bézier midpoint is exactly 50%. Reverse active duration is 300 ms; at 650 ms: 25 px.
- Overshoot clamps the reversal factor. At 500 ms the eased output is 1.625 and value is 162.5 px. The absolute reversal factor is clamped to 1.
- Zero duration with a positive delay. A zero-duration transition can wait for a positive delay. The value jumps at 200 ms, then returns normally at 500 ms.
- Combined duration is not positive. Duration plus delay is zero, so no transition starts; the value becomes B immediately.
- Repeated target does not restart. Requesting B again keeps the original transition. Reversal at 500 ms therefore uses factor 0.5.
- Descending source values, initial B. Source values can descend. After 250 ms toward A the value is −30 px; reversal reaches −55 px at 375 ms.
Frequently asked questions
Can overshooting curves differ between the specification and browsers?
Yes. For a negative reversal expression, the CSS specification applies an absolute value before clamping. In our Chromium check, that case snapped to the target instead of following the specification model. This calculator shows a warning when that condition occurs, including in JSON, CSV and HTML exports. Test unusual overshooting curves in your target browsers.
Why does a reversed CSS transition finish faster?
When a running transition returns to its reversing-adjusted start value, CSS calculates a shortening factor from the old eased progress and its previous factor. The destination state’s declared duration is multiplied by that new factor. Repeated reversals use the adjusted logical start, not simply the remaining distance.
How are positive and negative delays handled?
A nonnegative destination delay is retained in full. A negative destination delay is multiplied by the reversal factor, skipping part of the new transition immediately. If declared duration plus delay is zero or negative, no new transition starts. A zero duration with a positive delay waits, then jumps.
What do Before and After mean in the event table?
Before is the old interpolated source value at the event. After is the immediate value once the event has selected the new target and applied its delay. A negative delay can make these values different. Sampling at an event time uses the After convention.
Does the preview use my source pixel distances?
The endpoint track is normalized: A is 0% and B is 100%, so either source direction stays readable. Its marker clips overshoot visually. The source-value chart, sample number, reports and exported translateX CSS retain the raw pixel values, including overshoot.
Which CSS behavior is outside this calculator?
This is a bounded mathematical model for two constant translateX endpoints, one continuous numeric property and explicit strictly ordered target changes. It does not simulate the cascade, layout, computed-style resolution, simultaneous or batched style changes, multiple properties, changing timing settings, discrete transitions, steps easing, CSS events or reduced-motion overrides.
Is the HTML reproduction a deterministic browser test?
No. It uses real CSS transitions and schedules the entered targets with timers, logging requested and callback times. Browser load, rendering and background-tab throttling affect the timing. Use it to reproduce an interaction and inspect the browser; mathematical reports do not guarantee identical callback times.
Are values exact and are any inputs uploaded?
Calculations run locally using JavaScript floating-point numbers and numerical cubic Bézier inversion. Displayed numbers are rounded to six decimal places; JSON and CSV preserve the computed Number precision. There is no upload. Durations are 0–60000 ms, delays −60000–60000 ms, endpoints −10000–10000 px, event times 0–600000 ms and sample times 0–720000 ms. Up to 64 strictly ordered events are supported.
Can uncommon tools guarantee better click-through rates?
No. A specific useful tool can serve a narrower search intent, but low competition does not establish demand, ranking or click-through rate. Clear titles, useful explanations and measured Search Console results matter more than an unsupported promise.
Reference and related tools
The reversal rules follow CSS Transitions: starting transitions and faster reversing of interrupted transitions. Supported timing curves follow CSS Easing: cubic Bézier easing functions.
Animation Keyframe & SVG keyTimes Calculator · CSS 2D Transform & Coordinate Calculator · SVG Stroke & Progress Ring Calculator · All calculators