.transition-main {
    transition-property: opacity, transform;
    transition-duration: 550ms;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateX(0);
    opacity: 1;
  }
  
  html.is-animating .transition-main {
    opacity: 0;
    transform: translateX(-1em);
  }
  
  html.is-leaving .transition-main {
    transform: translateX(1em);
  }
  
  
  html.is-animating.to-left .transition-main {
    opacity: 0;
    transform: translateX(1em);
  }
  
  html.is-leaving.to-left .transition-main {
    transform: translateX(-1em);
  }