div.transition-fade {
  transition: 0.25s;
  -webkit-transition: 0.25s;
  opacity: 1;
  transform: translateX(0);
  transform-origin: left;
  -webkit-transform: translateX(0);
  -webkit-transform-origin: left;
}

div.is-animating:not(.to-top, .to-reset).transition-fade {
  opacity: 1;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

div.is-leaving:not(.to-top, .to-reset).transition-fade {
  opacity: 0;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

div.is-animating.to-top.transition-fade {
  opacity: 1;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

div.is-leaving.to-top.transition-fade {
  opacity: 0;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

div.is-animating.to-reset.transition-fade {
  opacity: 1;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

div.is-leaving.to-reset.transition-fade {
  opacity: 0;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}