Compare Measured Animation Durations in Normal and Reduced-Motion Modes — Free
A reduced-motion preference needs real behavior, not just a media-query name. Compare observed durations and identify unchanged or lengthened transitions while keeping duration distinct from motion intensity and accessibility compliance.
The proof surface
Finding-triage boards rank a broad set of accessibility issues. This indexcard reconciles one measurable property across two preference modes, excludes static originals from percentage summaries and never claims that a duration reduction makes an effect accessible.
Rare deviceFinding-triage boards rank a broad set of accessibility issues. This indexcard reconciles one measurable property across two preference modes, excludes static originals from percentage summaries and never claims that a duration reduction makes an effect accessible.
Output artifactSmallest reduction among timed originals with row-by-row context
Cost$0 local calculation · no card, paid key, subscription or signup · proposed filing price is not for sale
Sample, not your facts: Illustrative inputs: Drawer transition | 800 | 200; Toast movement | 300 | 0. Chosen minimum duration reduction percentage = 100. Smallest reduction among timed originals: 75 percent duration reduction. All records are invented.
Before using the motion-duration indexcard
Inventory a small set of transitions by the interaction that starts them, then observe both preference modes under the same browser conditions. Record the active duration rather than a CSS declaration that a script might override. A looping animation or a chain of effects needs a clearly defined measurement; this form does not infer that structure. Zero means no timed animation was observed for the entered transition, not that all movement on the page is gone. The useful artifact is a side-by-side measurement record a reviewer can take back to the implementation. Essential state feedback must remain understandable even if animation is removed. Ask users about the motion they experience instead of treating a percentage as a proxy for their sensory needs.
Why the flat version breaks
Assuming shorter means less problematic
Duration is one property. A brief large movement or flashing effect may still be uncomfortable or unsafe and needs a separate review.
Dividing by a static original
There is no meaningful percentage reduction from a zero-duration original. Static rows are stated as such, not converted into a flattering hundred-percent score.
Measuring declarations instead of behavior
Scripts, loops and chained transitions can differ from one CSS duration value. Use actual observed behavior for the particular trigger being inventoried.
How to work the motion-duration indexcard
Observe both modes for the same trigger
Use the same interaction, browser and state when measuring normal and reduced durations. Labels should name the transition, not a user or diagnosis. The app does not inspect CSS, emulate a page or fetch an animation.
Define zero and repeated effects
Enter zero only when no timed animation is observed in that mode for the inventoried trigger. Decide how to measure loops or sequences outside this simple form. A blank measurement is rejected rather than treated as no motion.
Compute a duration delta only when defined
For a positive original, reduction equals one minus reduced duration divided by normal duration, times one hundred. A longer reduced duration gives a negative reduction. Zero-to-zero rows are described as static and excluded from the minimum; zero-to-positive is an explicit error.
Review the actual movement and feedback
Inspect distance, flashing, loops, vestibular impact and essential feedback with users and an accessibility specialist. The selected percentage merely marks rows for this duration review. It does not substitute for the full reduced-motion experience.
What the motion-duration indexcard separates
Question
Before
Inspect this instead
Assuming shorter means less problematic
Duration is one property. A brief large movement or flashing effect may still be uncomfortable or unsafe and needs a separate review.
Define zero and repeated effects
Dividing by a static original
There is no meaningful percentage reduction from a zero-duration original. Static rows are stated as such, not converted into a flattering hundred-percent score.
Compute a duration delta only when defined
Measuring declarations instead of behavior
Scripts, loops and chained transitions can differ from one CSS duration value. Use actual observed behavior for the particular trigger being inventoried.
Review the actual movement and feedback
This motion-duration indexcard replaces a manual count or calculation, not source verification or the responsible person’s review.
Run it on the samples, right here
FIRST-LOAD
HYPOTHESIS / PROTOTYPE — checkout unavailable. Calculation is local. A draft is saved automatically in this browser profile when storage is available; Reset to sample clears it. Optional Pro history stores only five summaries and has its own deletion control. State links encode your inputs and can remain in browser history, clipboard or recipients’ records; share only non-sensitive rows. Optional external AI formatting leaves this device. The required site analytics beacon reports page activity; shared URLs contain encoded inputs. Do not treat an encoded URL as private. The calculator has no input-collection endpoint.
Duration arithmetic only, not an accessibility, medical, sensory-safety or compliance assessment. It cannot measure movement distance, flashing, essential feedback or user comfort. Test the actual reduced-motion path with users and a qualified accessibility specialist; do not treat a hundred-percent duration reduction as proof that a page is safe or accessible.
Data note: The motion-duration indexcard processes animation label | normal duration milliseconds | reduced-mode duration milliseconds locally. Starter/sample selection and Run compute in this tab; no input is sent by the calculator. A local draft may be saved; explicit state-link sharing or optional external AI formatting can disclose inputs. Use non-sensitive labels.
Go deeper: the companion app files the same reading as a index card with a stamped header
The article demo above runs without limits. The companion app keeps a local history, exports the rows as CSV, prints the motion-duration indexcard reading, and holds your drafts on this device — one complete free app run; the proposed $4 one-time filing layer is not for sale.
The motion-duration indexcard answer stays complete for free. The proposed $4 one-time filing layer adds row CSV, print and five local reading summaries, not hidden answers. Checkout is unavailable; the article demo remains unlimited.
Duration arithmetic only, not an accessibility, medical, sensory-safety or compliance assessment. It cannot measure movement distance, flashing, essential feedback or user comfort. Test the actual reduced-motion path with users and a qualified accessibility specialist; do not treat a hundred-percent duration reduction as proof that a page is safe or accessible.
What this is built on
Method: For a positive original, reduction equals one minus reduced duration divided by normal duration, times one hundred. A longer reduced duration gives a negative reduction. Zero-to-zero rows are described as static and excluded from the minimum; zero-to-positive is an explicit error.
All sample records, dates, quantities and labels are invented. No outside policy, contract, rate, clock offset, measurement or accessibility standard is represented as verified.
Google’s official pricing documentation, fetched 2026-09-30, says AI Studio is free in available regions. Optional formatting may require a Google account; manual local entry requires none. Limits can change and free-tier content may be used to improve products. Do not send private records.
Before: a reduced-mode label could conceal unchanged duration. After: measured mode differences are visible and static originals are kept out of percentage arithmetic.
Drawer duration falls from eight hundred to two hundred milliseconds: a seventy-five-percent reduction. Toast movement falls from three hundred to zero, a hundred-percent reduction. The smallest reduction among the originally timed animations is seventy-five percent and falls short of the entered hundred-percent review setting. That setting is illustrative, not an accessibility standard. Shortening motion can leave exactly the spatial movement that bothers a user, so the duration comparison cannot establish comfort or access.
Both originally timed animations now have zero entered duration in reduced mode. The arithmetic minimum is a hundred percent. A zero duration is still not proof that an element is static: script-driven changes, looping effects or other properties may be present. Test the actual preference mode, including navigation, state changes and essential feedback. The result records the measurements supplied rather than inspecting CSS or asserting that a reduced-motion implementation works.
The unchanged drawer has zero-percent duration reduction and is marked against the chosen hundred-percent setting. An already static marker has no timed original to reduce; its row says that explicitly and is excluded from the minimum, rather than presenting zero divided by zero as a percentage. If a zero-duration original gains a positive duration in reduced mode, the input is rejected as a newly introduced motion case that needs a separate review.
Optional AI formatting, never the calculation
Manual entry completes this motion-duration indexcard for free without signup. If available to you, the free AI Studio interface linked in the sources may format fictional or non-sensitive notes; external access may require an account. No API key or AI call is built into this tool. Free-tier content may be used to improve products. Review each cell and transcribe it to the labeled row schema; do not paste the JSON object into the row box.
Format only these fictional or non-sensitive notes for a motion-duration indexcard. Return strict JSON shaped as {"rows": [{"label": "string", "cells": ["string", "string"]}], "setting": "string"}. The columns are animation label | normal duration milliseconds | reduced-mode duration milliseconds; the setting is Chosen minimum duration reduction percentage. Keep all supplied strings and quantities exactly; do not calculate, infer missing entries, invent dates or add advice. If any required value is missing, return an empty rows array and ask me for it separately. I will verify every cell against my source and manually transcribe rows using vertical bars before running the local calculator.
An AI response is not executed, fetched or trusted as a result. Missing values remain questions; the strict local parser checks the rows you actually enter.