Re: [csswg-drafts] [css-values] Native interpolation function in CSS (#581)

@mirisuzanne and I propose the following syntax for this “generic interpolation function” that the CSSWG decided to add but didn't decide on syntax for:
```
  mix( [ <percentage> && [ by <easing-function> ]? ] ; <start-value> ; <end-value>)
```

`<percentage>` represents the percent of progress between `<start-value>` and `<end-value>`, and `<easing-function>` is used to calculate the mix ratio represented by that amount of progress. The default easing function is `linear`.

```
  opacity: mix( 70% by ease ; 0% ; 100% )
```

Note: As @tabatkins noted at one point, a generic interpolation function for CSS needs to use semicolons instead of commas, because commas can be part of the value space of various properties. (Since one key use case for the generic interpolation function is used to represent intermediate states in the OM, it has to be able to represent the interpolation of any two values on any two properties. See #2854.) 

Note: This is part of [rethinking various features](https://wiki.csswg.org/ideas/timelines)  for animation timelines and interpolation and how to fit them all together. See particularly our [proposal for extensions to `mix()`](https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-926351855) for query-linked interpolation in #6245.

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/581#issuecomment-926353789 using your GitHub account


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

Received on Friday, 24 September 2021 05:17:56 UTC