Re: [csswg-drafts] [css-animations-2] Declarative syntax for GroupEffects (#9554)

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