[csswg-drafts] [css-view-transitions] Is it possible to configure the default View Transition Animation on a more granular level? (#11815)

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

== [css-view-transitions] Is it possible to configure the default View Transition Animation on a more granular level? ==
The default view transition defines a single animation that leverages `transform`, `height`, and `width`. 

I can customize the entire default animation via `animation-duration`, `animation-timing-function`, `animation-delay`, etc.

Is it possible to customize the individual parts of the default animation separately? e.g. `transform` with a separate easing than `height` and `width`? If not, is this something we would consider supporting in the future? Naive imaginary API to get the conversation started:

```
@keyframes customized-default-animation-translation {
    to {
      translate: var(-ua-view-transition-group-anim-<view-transition-name>-default-translate-X) var(-ua-view-transition-group-anim-<view-transition-name>-default-translate-Y);
    } 
}

@keyframes customized-default-animation-height {
    to {
      height: var(-ua-view-transition-group-anim-<view-transition-name>-default-height)
    } 
}

@keyframes customized-default-animation-width {
    to {
      width: var(-ua-view-transition-group-anim-<view-transition-name>-default-width)
    } 
}

animation: 1s linear 0.25s customized-default-animation-translation, 0.5s ease-in-out 0s customized-default-animation-height, 0.25s linear(0, 0.5, 1) 0.1s customized-default-animation-width;
```


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


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

Received on Tuesday, 4 March 2025 01:48:32 UTC