- From: Yehonatan Daniv via GitHub <sysbot+gh@w3.org>
- Date: Fri, 26 Jan 2024 18:12:44 +0000
- To: public-css-archive@w3.org
Great, that's good test, although in your example there's no case of multiple animations on the same element. So it's a case 4 but not really requiring the `@groupeffect` part. There's a fade on the `::backdrop`, a slide on the `.popup`, and the fade on different parts of the contents. If I try to translate this example into code it should like as below: ```css @keyframes slide { from { translate: -100%; } } @keyframes fade { from { opacity: 0; } } dialog { group-effect: --showModal 2s sequence, --showContent / --showModal 2 1s start calc(200ms * log(effect-index() + 1)); &::backdrop { animation: fade 0.5s ease-out; animation-group: --showModal 0; } .popup { animation: slide 0.6s -0.1s ease-out; animation-group: --showModal 1; } h1 { animation: fade 0.2s; animation-group: --showContent 0; } li { animation: fade 0.2s; animation-group: --showContent calc(sibling-index() + 1); } } ``` ### Some highlights This part: ```css group-effect: --showModal 2s sequence, ``` Groups the entire timeline. While the second GroupEffect here: ```css --showContent / --showModal 2 1s start calc(200ms * log(effect-index() + 1)); ``` Groups together the effects on the content. Specifically this part `/ showModal 2` stands for some syntax that should say that the parent group of `--showContent` is `--showModal` and its ordinal in that group is `2`. Notice I also used negative `delay` to slightly overlap the face of the `::backdrop` and the slide of `.popup` as requeted, here: ```css animation: slide 0.6s -0.1s ease-out; ``` I guess if we wanted to test case 4 with also multiple animations on a single element, let's assume the fade and slide effects are both on the `dialog` itself. Then it would look like the following: ```css @groupeffect --showModal { fade { duration: 0.5s; easing: ease-out; } slide { duration: 0.6s; delay: -0.1s; easing: ease-in; } } dialog { group-effect: --showModal 2s sequence, --showContent / --showModal 2 1s start calc(200ms * log(effect-index() + 1)); ... } ``` And with the assumption above that we define the effects defined inside `--showModal` get ordinals that start from `0`. -- GitHub Notification of comment by ydaniv Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9554#issuecomment-1912482112 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 26 January 2024 18:12:46 UTC