[csswg-drafts] [css-easing-2] Accept `<number>` as `<easing-function>` (#9184)

cdoublev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-easing-2] Accept `<number>` as `<easing-function>` ==
Follow up of https://github.com/w3c/csswg-drafts/issues/1012#issuecomment-1384981321.

With the new `linear()` function, CSS authors now have the ability to create custom timing functions. However it can be verbose for [some functions](https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/#using_linear_easing_function_with_svg_paths):

```css
: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 `p`rogress parameter.

```css
: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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9184 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 12 August 2023 12:30:58 UTC