Turn an easing name, cubic-bezier or spring into CSS timing functions with sampled progress and feel notes

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Easing: custom over 300 ms

transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2);
/* with duration */ transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2);

Samples (time fraction: progress):
0: 0  0.1: 0.42  0.2: 0.721  0.3: 0.897  0.4: 0.991  0.5: 1.039  0.6: 1.057  0.7: 1.058  0.8: 1.046  0.9: 1.026  1: 1

- Decelerating (100% done at half time): fast start, soft landing. Convention: use for things entering or responding to a touch.
- Progress at 25% of the time: 82%. Opening slope 4.5x linear speed.
- Overshoots the target by 5.9%. Fine for playful, physical-feeling moves; avoid on text blocks and anything that must align exactly.

Limits: samples are computed numerically; browsers may differ by a rounding error. The feel notes are conventions. Always judge motion by playing it at real size.