wallop/css/wallop--vertical-slide.css

wallop is a minimal 4kb library for showing & hiding things

/**
 * wallop--vertical-slide.css
 *
 * @fileoverview Verical slide animation for wallop
 *
 * @author Pedro Duarte
 * @author http://pedroduarte.me/wallop
 */

/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
.Wallop--vertical-slide .Wallop-list {
  position: relative;
  overflow: hidden;
}

.Wallop--vertical-slide .Wallop-item--showNext {
  -webkit-animation: slideFromTop 350ms 10ms linear both;
  -moz-animation: slideFromTop 350ms 10ms linear both;
  -ms-animation: slideFromTop 350ms 10ms linear both;
  animation: slideFromTop 350ms 10ms linear both;
}

.Wallop--vertical-slide .Wallop-item--showPrevious {
  -webkit-animation: slideFromBottom 350ms 10ms linear both;
  -moz-animation: slideFromBottom 350ms 10ms linear both;
  -ms-animation: slideFromBottom 350ms 10ms linear both;
  animation: slideFromBottom 350ms 10ms linear both;
}

.Wallop--vertical-slide .Wallop-item--hidePrevious,
.Wallop--vertical-slide .Wallop-item--hideNext {
  visibility: visible;
}

.Wallop--vertical-slide .Wallop-item--hidePrevious {
  -webkit-animation: slideToBottom 350ms 10ms linear both;
  -moz-animation: slideToBottom 350ms 10ms linear both;
  -ms-animation: slideToBottom 350ms 10ms linear both;
  animation: slideToBottom 350ms 10ms linear both;
}

.Wallop--vertical-slide .Wallop-item--hideNext {
  -webkit-animation: slideToTop 350ms 10ms linear both;
  -moz-animation: slideToTop 350ms 10ms linear both;
  -ms-animation: slideToTop 350ms 10ms linear both;
  animation: slideToTop 350ms 10ms linear both;
}

@-webkit-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-moz-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-ms-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-moz-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-ms-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-webkit-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}