[csswg-drafts] [css-animations-2] Delaying animations based on other animations (#10429)

Que-tin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-2] Delaying animations based on other animations ==
It's a common use case to delay animations up until another animation has finished. This can to some degree be achieved today by using a delay that exactly matches the `animation-duration`, at least for conventional animations.
With scroll driven animations triggering normal animations this gets harder and people therefore need to fallback on javascript.

I would propose a new keyword called `animation-reference-name` where a custom name can be assigned to the element an animation is assigned to. Sadly `animation-name` is already in use otherwise the naming would be consistent to `container-name` and `anchor-name`. But it could be integrated inside of `animation-name` as a shorthand.

That newly introduced custom-indent could then be used as a value on `animation-delay`.

The syntax would look as follows:

```
animation-reference-name:  none | <dashed-ident>#
```

```
animation-delay:  <time># | <dashed-ident>
```

```
animation-name: [ none | <keyframes-name> ] [/ none | <dashed-ident>#]?
```

I'm not really sure why [`animation-delay`](https://www.w3.org/TR/css-animations-1/#animation-delay) currently supports `<time>#` and what implications it has to define multiple times there.


There are a couple of things to note and need to be thought about:

- What happens if the referenced element is looping and the loop is faster than the animation of the referencing element?
- Is there a need to do smth. similar with transitions?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10429 using your GitHub account


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

Received on Wednesday, 12 June 2024 06:28:23 UTC