Re: [csswg-drafts] Request for New CSS Property: 'mask-rotation' (#10024)

Hi Sebastian

I've tried your proposal with a mask image animation that makes the mask to rotate 180deg when `.dark` tag triggers. I'm using an svg as the mask:
```css
@image --rotate {
  rotate: 180deg;
}
.light .alternate-gradient-bg{
    clip-path: circle(150% at 95.25% 90.5%);
    mask-image: none;
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 4500px;
    mask-position: bottom -2180px right -2180px;
    transition: 1s ease-out;
}
.dark .alternate-gradient-bg{
    clip-path: circle(4.4% at 95.25% 90.5%);
    mask-image: image(url("/BlackHole.svg"), --rotate);
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 100px;
    mask-position: bottom 20px right 20px;
    transition: 1s ease-out;
}
```
But what I got is that the tag `image` in the mask-image makes the mask of the svg to not being applied even without using the `@image` rule. 
What I currently have is a mask animation where the gradient background has a black hole mask, that when combined with clip-path and changing the mask-size, gives the illusion of the background being absorbed by a blackhole, the only thing left is making the mask to rotate from 0 to 180deg during transition so the black hole effect is done. That's why I'm proposing a mask-rotate property, so it is consistent with mask-size and mask-position properties on making mask animations.

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


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

Received on Saturday, 9 March 2024 06:40:13 UTC