[css-easing-2] Custom math-based easing functions #9184
Description
Follow up of #1012 (comment).
With the new linear() function, CSS authors now have the ability to create custom timing functions. However it can be verbose for some functions:
:root {
--bounce-easing: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);
}I would like to propose to accept <number> as an <easing-function>. <number> can be replaced with a math function, which is valid only if it includes a progress parameter.
:root {
--ease-in-sin: 1 + sin(pi * (p / 2 - 0.5));
--ease-in-quad: pow(p, 2);
--ease-in-cubic: pow(p, 3);
--ease-in-arc: 1 - sin(acos(p));
--ease-out-sin: sin(pi * p / 2);
--ease-out-cubic: (p * -1) * pow(p, 2) + 1;
--ease-out-quad: p * (2 - p);
--ease-out-quart: 1 - (p * 1) * pow(p, 3);
--ease-out-arc: sin(acos(1 - p));
--ease-in-out-sin: (1 + sin(pi * (p - 0.5))) / 2;
}Without conditional statements, this syntax is less powerfull than linear() but it partially mirrors what people are requesting for in Web Animations (eg. keyframe = { easing: customFnTakingProgress }) in several issues, and may be simple to implement by UAs.