- From: Francisco Ryan Tolmasky I via GitHub <sysbot+gh@w3.org>
- Date: Sat, 13 Jan 2024 01:09:57 +0000
- To: public-css-archive@w3.org
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