Open
Description
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;