Re: [csswg-drafts] [scroll-animations-1] Transition delays in scroll-linked animations (#7059)

I'd like to revisit this issue, since this feature is pretty much essential to most [pointer-driven animations](#10574), and also necessary for the 2 issues mentioned above.

### Proposal
I think it would be more useful and consistent to make `animation-timeline` a shorthand, and expose this as its sub-properties, as: `-duration`, `-delay`, and `-easing` (or `-timing-function`), with the corresponding defaults of `0s`, `0s`, and `ease-out`.
The `<timeline>` value could then fit into a new sub-property, I guess `-name`?

There's also another option, if `animation-timeline-duration` etc. feels funny, we could nest those under another shorthand like `animation-timeline-transition`.

The JS API could then be:

```javascript
const tl = new ScrollTimeline({
  duration: 300,
  easing: 'ease-out'
});
```

Though again, this may seem somewhat confusing to read.
So, perhaps expose as a `transition` property that takes these as an `object`?

/cc @flackr @fantasai @smfr @birtles 

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


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

Received on Sunday, 10 August 2025 07:58:26 UTC