.km-reveal{
  opacity:0;
  transform:translate3d(0,48px,0);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.km-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

.km-reveal--left{
  transform:translate3d(-48px,0,0);
}

.km-reveal--right{
  transform:translate3d(48px,0,0);
}

.km-reveal--up{
  transform:translate3d(0,48px,0);
}

.km-reveal--down{
  transform:translate3d(0,-48px,0);
}

.km-reveal.is-visible.km-reveal--left,
.km-reveal.is-visible.km-reveal--right,
.km-reveal.is-visible.km-reveal--up,
.km-reveal.is-visible.km-reveal--down{
  transform:translate3d(0,0,0);
}

@media (prefers-reduced-motion: reduce){
  .km-reveal,
  .km-reveal--left,
  .km-reveal--right,
  .km-reveal--up,
  .km-reveal--down{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

.km-reveal{
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.km-reveal.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}