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.
Description
Evenly spaced keyframe offsets include both the start and end of an animation.
Evenly spaced keyframe offsets include both the start and end of an animation. With n keyframes there are n−1 intervals, so dividing by the number of keyframes would leave the last offset short of 100%.1
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.
When to use Keyframe Percent Even Split Calculator
Use this tool to 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.
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 Keyframe Percent Even Split Calculator 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 count using the field table and calculation rules, then run the tool.
- Read percentages. 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 |
|---|---|---|---|
| count | Count | integer; minimum: 2; maximum: 10000 | Required |
Enter an integer count from 2 through 10,000. The tool creates that many offsets, starting at 0, evenly dividing the intermediate positions and assigning the final offset exactly 100. It returns numeric percentages at full floating-point precision rather than formatted CSS strings.
percentage_i = 100 × i/(count − 1), for zero-based i = 0…count−1 Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| percentages | Keyframe percentages | list of number; minimum: 0; maximum: 100 |
{
"input": {
"count": 5
},
"output": {
"percentages": [
0,
25,
50,
75,
100
]
}
}Limitations and assumptions
It does not generate animated property values, easing or a stylesheet. Offsets may have repeating decimal representations and are not rounded to a chosen number of places. At least two offsets are required to include distinct endpoints.
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 Transition Delay Stagger Increment: Calculate the delay of a zero-based staggered transition from an initial delay and a nonnegative increment. 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
-
Keyframe Percent Even Split Calculator — tool.io
Similar or alternative tools
- Transition Delay Stagger Increment
Calculate the delay of a zero-based staggered transition from an initial delay and a nonnegative increment.
- Cubic-Bezier Easing Name Control Points Lookup
Return the two cubic Bezier control points specified for a CSS easing keyword.