.super-reveal {
  opacity: 0;
}

.super-reveal.fade {
  opacity: 0;
}

.super-reveal.from-left {
  transform: translate(-50px, 0);
}

.super-reveal.from-right {
  transform: translate(50px, 0);
}

.super-reveal.from-top {
  transform: translate(0, -30px);
}

.super-reveal.from-bottom {
  transform: translate(0, 30px);
}

.super-reveal.scale-left {
  transform: scale(0, 1);
  transform-origin: left center;
}

.super-reveal.scale-right {
  transform: scale(0, 1);
  transform-origin: right center;
}

.super-reveal.scale-top {
  transform: scale(1, 0);
  transform-origin: center top;
}

.super-reveal.scale-bottom {
  transform: scale(1, 0);
  transform-origin: center bottom;
}

.super-reveal.zoom {
  transform: scale(0, 0);
  transform-origin: center center;
}


.super-reveal.scale-left.after-animated {
  transition: 0.2s ease-out, opacity 0.1s ease-out;

}

.super-reveal.scale-right.after-animated {
  transition: 0.2s ease-out, opacity 0.1s ease-out;

}

.super-reveal.scale-top.after-animated {
  transition: 0.2s ease-out, opacity 0.1s ease-out;

}

.super-reveal.scale-bottom.after-animated {
  transition: 0.2s ease-out, opacity 0.1s ease-out;

}


.super-reveal.after-animated {
  opacity: 1;
  transition: 0.8s ease-out, opacity 0.4s ease-out;
  transform: none;
}

.super-reveal.after-animated.zoom {
  transition: 0.2s ease-out, opacity 0s ease-out;
}

.super-reveal.wiggle {
  opacity: 1;
}

.super-reveal.after-animated.wiggle {
  transition: 0s;
  animation: wiggle-vertical 0.3s linear;
}

@keyframes wiggle-vertical {
  0%,
  50%,
  100% {
    transform: translateY(0px);
  }

  25%,
  75% {
    transform: translateY(-4px);
  }
}

.super-reveal.flip {
  opacity: 1;
  transform: rotateY(180deg) translateZ(50px);
  perspective: 1000px;
}

.super-reveal.flip > * {
  visibility: hidden;
}

.super-reveal.flip.after-animated {
  transition: 1s;
  transform: rotateY(0deg) translateZ(0px);
}

.super-reveal.flip.after-animated > * {
  visibility: visible;
  transition: 0s .5s;
}