Transition Delay Stagger Increment

Calculate the delay of a zero-based staggered transition from an initial delay and a nonnegative increment.

Description

Staggering transitions assigns successive items a regularly increasing delay.

Staggering transitions assigns successive items a regularly increasing delay. A negative initial delay is meaningful in CSS because the transition can begin as though part of its duration has already elapsed.^[1]

Calculate the delay of a zero-based staggered transition from an initial delay and a nonnegative increment.

When to use Transition Delay Stagger Increment

Use this tool to calculate the delay of a zero-based staggered transition from an initial delay and a nonnegative increment.

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.

How to use Transition Delay Stagger Increment and understand its results

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
Enter initialDelay, increment, index using the field table and calculation rules, then run the tool.
Read delay. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
initialDelay	Initial delay	number	Required
increment	Delay increment	number; minimum: 0	Required
index	Zero-based item index	integer; minimum: 0; maximum: 9007199254740991	Required

Enter the initial delay, a nonnegative increment and a nonnegative safe-integer item index. Use the same time unit for both delays; the result retains that unit. The first item, index 0, receives the initial delay. The tool tries an algebraic fallback when the first expression overflows and returns an error if the delay remains nonfinite.

delay = initialDelay + increment × zero-based index

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
delay	Transition delay	number

json

{
  "input": {
    "initialDelay": 50,
    "increment": 25,
    "index": 3
  },
  "output": {
    "delay": 125
  }
}

Limitations and assumptions

It calculates one delay rather than writing CSS or scheduling transitions. Duration, easing, interruption and the actual transition lifecycle are not modeled. The index is zero-based, so a displayed item number may require subtracting one.

Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Keyframe Percent Even Split Calculator: Generate evenly spaced keyframe percentages including 0 and 100 from a count of at least two, returning full number precision and limiting materialization to 10,000 offsets. For a complementary task, use Cubic-Bezier Easing Name Control Points Lookup: Return the two cubic Bezier control points specified for a CSS easing keyword.

References

Transition Delay Stagger Increment — tool.io

Similar or alternative tools

Keyframe Percent Even Split Calculator
Generate evenly spaced keyframe percentages including 0 and 100 from a count of at least two, returning full number precision and limiting materialization to 10,000 offsets.
Cubic-Bezier Easing Name Control Points Lookup
Return the two cubic Bezier control points specified for a CSS easing keyword.