What's New in CSS - Ste Greig

Cross Document View Transitions

There's a lot of scope to the new View Transitions API, but the headline grabber is you can now transition between *separate pages* with a simple CSS rule.

The code snippet will enable a simple fade transition between any pages that have this in place.

To test this out, use the arrows in the bottom right to navigate between the pages of this site!

@view-transition {
  navigation: auto;
}

More Control

The API provides a bunch of pseudo-classes that allow you more control over the animations of the exiting and entering pages.

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)

These all target the root element, but you can use the view-transition-name property on any element to animate specific elements.

.my-header {
  view-transition-name: my-header;
}

After this, you now have additional pseudo-classes to target for your specific element.

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(my-header)
    └─ ::view-transition-image-pair(my-header)
      ├─ ::view-transition-old(my-header)
      └─ ::view-transition-new(my-header)

Here's an example of CSS animations being applied to the exiting page (::view-transition-old(root)) and the entering page (::view-transition-new(root)).

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(100px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-100px); }
}

::view-transition-old(root) {
  animation: 1s fade-out, 1s slide-to-left;
}

::view-transition-new(root) {
  animation: 1s fade-in, 1s slide-from-right;
}