Re: [csswg-drafts] [css-transforms] Feature request: Animate a part of an element (#11564)

Thank you for reponding!

A usecase:

Some office buildings have an entrance made of two glass doors. When you approach the doors they open electrically; one goes to the left and one goes to the right. 

Now we have an image of these doors on our website. Let's try to create the animation to open the doors. Currently we can not do that because the animation works on the whole image; not the left or right part only. The CSS-code:

@keyframes doorLeft {
 from {transform: translate3d(0, 0, 0);}
 to {transform: translate3d(-100%, 0, 0);}
}
@keyframes doorRight {
 from {transform: translate3d(0, 0, 0);}
 to {transform: translate3d(100%, 0, 0);}
}
.doors{
 animation: 
  1s linear doorLeft;
  1s linear doorRight;
 animation-offset 0 0 50% 100% , 50% 0 50% 100%; /* <- this is my proposal (feel free to find a better name) */
} 

More examples:
- In some SF-movies we see doors that open in 4 parts: each part diagonally moves to top-left, top-right, bottom-right and bottom-left resp.
- again an image: divide it in 20 vertical ribbons. Let the image come in by moving the ribbons one by one from the right to the left with a gap between each ribbon. When the ribbon comes on the destination the next ribbon decreases it gap till it reaches its destination also; and so one.
- a div containing several HTML-elements: divide it in 9 equal parts. Let them rotate out...
The possibilities are endless.

Did this made things clear?


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


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

Received on Thursday, 27 March 2025 21:40:41 UTC