How to increase animation-duration for default opacity / transform animation?

[powerbuoy]

Loving this new API! I tried it out as soon as I heard about it and it's really cool, but I was trying to increase the default transform / opacity animation duration so I tried this bit of code here:

::page-transition-outgoing-image(post-background),
::page-transition-incoming-image(post-background) {
	animation-duration: 10s;
}

And while this does increase the duration of the opacity change, the transform is still the same speed as before.

What am I doing wrong?

You can view my full demo here: https://sleekwp.dev/fun/page-transition/ and the full CSS in question here https://sleekwp.dev/fun/page-transition/css/page-transition.css

[vmpstr]

Hey thanks for reaching out!

The transform animation is happening on the ::page-transition-container element which is an ancestor of the outgoing and incoming images, so if you have something like the following then it should properly adjust the transform speed:

::page-transition-container(post-background) { animation-duration: 10s; }

(PS That's a cool looking demo!)

[powerbuoy]

Ahh I see! Excellent, thanks for replying so quickly 😁