Add forwards fill mode to animations in view transition fixture

[sebmarkbage]

It turns out that View Transitions can sometimes overshoot and then we need to ensure it fills. It can otherwise sometimes flash in Chrome.

This is something users might hit as well.

[react-sizebot]

Comparing: 348a4e2...b17bdc3

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	534.32 kB	534.32 kB	=	94.32 kB	94.32 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	663.64 kB	663.64 kB	=	117.01 kB	117.01 kB
facebook-www/ReactDOM-prod.classic.js	=	687.59 kB	687.59 kB	=	121.04 kB	121.04 kB
facebook-www/ReactDOM-prod.modern.js	=	678.02 kB	678.02 kB	=	119.39 kB	119.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against b17bdc3

[jackpope]

Is there any documentation on this from Chrome? If so we could consider docs section for trouble shooting linking out to resources like it.

People may assume a React bug and not use the feature instead of investigating things like a CSS animation edge case.

[sebmarkbage]

I think it's because the animation used here is 0.25s and a lot of the default ones are 0.3s. Since the animations keep playing until all of them have completed and the view transition finishes, it happened to kept looping for 0.05s. It was just more noticeable in Chrome.

That's probably just a general view transition gotcha to document.

It can be hard to have an animation shorter than the default since you have to override all of them.