Using simple view transitions

htmlcss

So for a while view-transitions have been around. Firefox is not 'transitioning' yet, however they will certainly support it someday.

I've been adding this snippet of css to my newest projects and it makes the site transition smoothly. You can see it in action navigating through my website.

@view-transition {
  navigation: auto;
}

/* Customize the default animation behavior */
::view-transition-group(root) {
  animation-duration: 0.5s;
}

/* Fade animation keyframes */
@keyframes fade-out {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

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

/* Fade transition rules */
::view-transition-old(fade) {
  animation: 0.4s ease-in both fade-out;
}

::view-transition-new(fade) {
  animation: 0.4s ease-in both fade-in;
}

And with just that my already speedy eleventy blog is now also smooth as butter.

p.s. I've just watched this youtube video by camelCase who shows how easily you can transition things like logo or images. Definitely a must watch!

Cheerio!