steps() Jump-End/Start Count
Evaluate CSS steps timing at progress zero through one for jump-start or jump-end, including the before flag.
Description
A steps easing function changes output in discrete jumps instead of continuously.
A steps easing function changes output in discrete jumps instead of continuously. At a jump boundary, the before flag chooses the lower side of the discontinuity rather than the usual upper-side value.1, 2
Evaluate CSS steps timing at progress zero through one for jump-start or jump-end, including the before flag.
When to use steps() Jump-End/Start Count
Use this tool to evaluate CSS steps timing at progress zero through one for jump-start or jump-end, including the before flag.
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 steps() Jump-End/Start Count 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 steps, position, progress, before using the field table and calculation rules, then run the tool.
- Read jumps, outputProgress. 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 |
|---|---|---|---|
| steps | Step count | integer; minimum: 1; maximum: 9007199254740991 | Required |
| position | Step position | string; one of jump-start, jump-end | Required |
| progress | Input progress | number; minimum: 0; maximum: 1 | Required |
| before | Before discontinuity flag | boolean | Required |
Choose a positive integer steps count, jump-start or jump-end, progress from 0 to 1 inclusive, and the before flag. The tool floors progress times steps, adds one for jump-start, subtracts one when before is true at an exactly integral product, then clamps to the available steps. jumps equals the supplied step count. The returned outputProgress is the clamped step divided by that count.
current = clamp(floor(progress × steps) + start adjustment − before-boundary adjustment, 0, steps); output = current / steps Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| jumps | Jump count | integer; minimum: 0; maximum: 9007199254740991 |
| outputProgress | Output progress | number; minimum: 0; maximum: 1 |
{
"input": {
"steps": 4,
"position": "jump-end",
"progress": 0.5,
"before": false
},
"output": {
"jumps": 4,
"outputProgress": 0.5
}
}Limitations and assumptions
Only the two named positions and the stated progress interval are supported; jump-none, jump-both and start/end aliases are not accepted. Boundary detection uses the computed floating-point product, with no tolerance. This does not evaluate an animation timeline or infer its before flag.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Cubic-Bezier Easing Name Control Points Lookup: Return the two cubic Bezier control points specified for a CSS easing keyword. For a complementary task, 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.
Further background: CSS Easing Functions Level 2.
References
-
steps() Jump-End/Start Count — tool.io
Similar or alternative tools
- Cubic-Bezier Easing Name Control Points Lookup
Return the two cubic Bezier control points specified for a CSS easing keyword.
- 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.