wallop/css/wallop--slide.css

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

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

/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
.Wallop--slide .Wallop-item--showPrevious {
  -webkit-animation: slideFromLeft 350ms 10ms linear both;
  -moz-animation: slideFromLeft 350ms 10ms linear both;
  -ms-animation: slideFromLeft 350ms 10ms linear both;
  animation: slideFromLeft 350ms 10ms linear both;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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