Cubic-Bezier Easing Name Control Points Lookup
Return the two cubic Bezier control points specified for a CSS easing keyword.
Description
A cubic Bézier easing curve uses fixed endpoints (0,0) and (1,1) with two intermediate control points.
When to use Cubic-Bezier Easing Name Control Points Lookup
Use this tool to return the two cubic Bezier control points specified for a CSS easing keyword.
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 Cubic-Bezier Easing Name Control Points Lookup 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 keyword using the field table and calculation rules, then run the tool.
- Read x1, y1, x2, y2. 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 |
|---|---|---|---|
| keyword | Easing keyword | string; one of linear, ease, ease-in, ease-out, ease-in-out | Required |
Choose linear, ease, ease-in, ease-out or ease-in-out. The lookup returns four numeric coordinates: linear (0,0,1,1), ease (0.25,0.1,0.25,1), ease-in (0.42,0,1,1), ease-out (0,0,0.58,1), or ease-in-out (0.42,0,0.58,1). The endpoints are implicit and are not returned.
keyword → (x1, y1, x2, y2) for the two control points Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| x1 | First control point x | number |
| y1 | First control point y | number |
| x2 | Second control point x | number |
| y2 | Second control point y | number |
{
"input": {
"keyword": "ease"
},
"output": {
"x1": 0.25,
"y1": 0.1,
"x2": 0.25,
"y2": 1
}
}Limitations and assumptions
It returns control points rather than evaluating output progress or solving the curve's x coordinate. Custom cubic-bezier values, steps and linear() piecewise functions are outside this lookup. The returned linear points describe the equivalent straight easing curve.
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 steps() Jump-End/Start Count: Evaluate CSS steps timing at progress zero through one for jump-start or jump-end, including the before flag. 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
Similar or alternative tools
- steps() Jump-End/Start Count
Evaluate CSS steps timing at progress zero through one for jump-start or jump-end, including the before flag.
- 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.