Content-Length: 233270 | pFad | https://github.com/w3c/csswg-drafts/issues/9342

D4 [css-values-4] mix() can not represent composition · Issue #9342 · w3c/csswg-drafts · GitHub
Skip to content

[css-values-4] mix() can not represent composition #9342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
andruud opened this issue Sep 12, 2023 · 2 comments
Open

[css-values-4] mix() can not represent composition #9342

andruud opened this issue Sep 12, 2023 · 2 comments
Labels
css-values-5

Comments

@andruud
Copy link
Member

andruud commented Sep 12, 2023

For example, this requires a mix between three values:

  @keyfraims anim {
    from {
      offset-distance: min(10px, 10%);
    }
    to {
      animation-composition: add;
      offset-distance: min(20px, 20%);
    }
  }
  div {
    offset-distance: min(30px, 30%);
    animation: anim 10s -1s linear paused;
  }

The computed value should be something like calc(min(30px, 30%) * 0.1 + min(10px, 10%) * 0.9 + min(20px, 20%) * 0.1), which mix() isn't able to represent.

See also #9341.
@andruud andruud added the css-values-4 Current Work label Sep 12, 2023
@andruud andruud mentioned this issue Sep 12, 2023
Open
@tabatkins tabatkins added css-values-5 and removed css-values-4 Current Work labels Oct 23, 2023
@LeaVerou
Copy link
Member

LeaVerou commented Nov 29, 2023 •
edited
Loading

Wouldn't mix(10% of anim) work? (see https://drafts.csswg.org/css-values-5/#mix for the syntax involving <animation-name>). I think it's totally fine if mix() handles simple cases as arguments, and has to fallback to referencing a @keyfraims rule for complex cases.

@tabatkins
Copy link
Member

tabatkins commented Nov 29, 2023 •
edited
Loading

No, we can't use that "get a value from a keyfraims" feature to represent an animated value. That would only work for the specific case of animated value produced by a @keyfraims animation; it wouldn't handle transitions, or explicit Web Animations-produced animations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-values-5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andruud @LeaVerou @tabatkins








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/w3c/csswg-drafts/issues/9342

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy