.reveal-image {
  opacity: 0;
  position: relative;
  overflow: hidden;
}

.reveal-image.revealed {
  opacity: 1;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.reveal-left.revealed { animation-name: revealFromLeft; }
.reveal-right.revealed { animation-name: revealFromRight; }
.reveal-top.revealed { animation-name: revealFromTop; }
.reveal-bottom.revealed { animation-name: revealFromBottom; }
.reveal-top-left.revealed { animation-name: revealFromTopLeft; }
.reveal-top-right.revealed { animation-name: revealFromTopRight; }
.reveal-bottom-left.revealed { animation-name: revealFromBottomLeft; }
.reveal-bottom-right.revealed { animation-name: revealFromBottomRight; }
.reveal-center-out.revealed { animation-name: revealFromCenterOut; }
.reveal-out-center.revealed { animation-name: revealFromEdgeToCenter; }

@keyframes revealFromLeft {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromRight {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromTop {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromBottom {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromTopLeft {
  0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromTopRight {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromBottomLeft {
  0% { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromBottomRight {
  0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromCenterOut {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes revealFromEdgeToCenter {
  0% { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}