[csswg-drafts] [css-variables-2] Allow CSS variable to store transforms (#9791)

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

== [css-variables-2] Allow CSS variable to store transforms ==
I searched the bugs for whether this was already suggested and didn't find anything, so apologies if this has already been covered. I'm just looking to be able to store transforms in CSS variables. One use case is to make "modular animations" significantly easier to implement with transforms. For example:

```css
@keyframes 4-step-transform
{
    0% { transform: var(--transform-0); }
    25% { transform: var(--transform-25); }
    50% { transform: var(--transform-50); }
    100% { transform:var(--transform-100); }
}

.something
{
    --transform-0: translate(20px, 10px);
    --transform-1: translate(200px, 10px);
    --transform-2: translate(10px, 1000px);
    --transform-3: translate(99px, 9px);

    animation: 1s ease-in-out 4-step-transform;
}
```

Currently the best you can do is something far less reusable and much more verbose:

```css
@keyframes 4-step-transform
{
    0% { transform: translate(var(--x-0), var(--y-0)); }
    25% { transform: translate(var(--x-25), var(--y-25));}
    50% { transform: translate(var(--x-50), var(--y-50)); }
    100% { transform: translate(var(--x-100), var(--y-100));}
}
```


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


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

Received on Saturday, 13 January 2024 01:09:59 UTC