[csswg-drafts] [view-transitions-1] Have the `-image-pair`, `-old`, and `-new` pseudos inherit `animation-timing-function` (#11546)

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

== [view-transitions-1] Have the `-image-pair`, `-old`, and `-new` pseudos inherit `animation-timing-function` ==
_(This issue is basically a copy of #9817 adjusted to be about `animation-timing-function` instead of `animation-delay`.)_

I just caught myself doing this in a project I’m working on:

```css
:root::view-transition-image-pair(*),
:root::view-transition-new(*),
:root::view-transition-old(*) {
  animation-timing-function: inherit;
}
```

I needed to do this to sync up the `animation-timing-function` from the `::view-transition-group(x)` to its child-pseudos.

```css
::root:view-transition-timing-function(header) {
  animation-timing-function: linear(…);
}
```

Without the first code snippet my animations were not in sync: the default fade-in/fade-out on the new/old pseudo runs at a different curve.

I was surprised that `animation-timing-function: inherit;` on the pseudos isn’t part of the [UA stylesheet VT styles](https://drafts.csswg.org/css-view-transitions/#ua-styles), especially since the VT UA styles do exactly that for `animation-duration` + `animation-fill-mode` + `animation-delay`:

```css
/* UA Stylesheet (selection) */
:root::view-transition-group(*) {
  … 

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

:root::view-transition-image-pair(*) {
  …

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

:root::view-transition-old(*),
:root::view-transition-new(*) {
  …

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}
```

I think it would be handy to include `animation-timing-function: inherit` for the `-image-pair`, `-old`, and `-new` pseudos in the UA stylesheet so that setting a timing-function on the `-group` automatically gets applied on the the child pseudos as well, keeping them all in sync.




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


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

Received on Monday, 20 January 2025 22:52:31 UTC