In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.
Transcript
[00:00] The default view transition is this crossfade between one view and the next, but if you want to customize that I'm going to set up a slide out to right and use the view transition old selector. Select the root of the DOM there And we'll have to set up these keyframes for this animation. And then also set the new view state or transition. We'll have to set this up as well. So we'll set up the keyframes for this, which is just essentially start at X, negative 100% off screen to the left, and then the default, and then go from the default off-screen 100% to the right.
[00:34] Translate X is essentially moving horizontally on the x-axis. So now when you click this you'll see it slide off to the right and slide in from the left. And if you want it the other way you can simply use AI, select the entire thing, say reverse this animation to go right to left, and then trust AI enough that once you click this now it's going right to left.