[data-module=FadeIn] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-module=FadeIn].is-FadeIn {
  opacity: 1;
  transform: translateY(0);
}

[data-module=SlideIn] {
  overflow: hidden;
}
[data-module=SlideIn].is-SlideIn::after {
  animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
  animation-name: img-wrap-before;
  left: 0;
  right: 0;
}
@keyframes img-wrap-before {
  100% {
    transform: translateY(100%);
  }
}