wallop/css/wallop--rotate.css

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

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

.Wallop--rotate .Wallop-item--hidePrevious,
.Wallop--rotate .Wallop-item--hideNext {
  visibility: visible;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.Wallop--rotate .Wallop-item--hidePrevious {
  -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.Wallop--rotate .Wallop-item--hideNext {
  -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.Wallop--rotate .Wallop-item--hidePrevious,
.Wallop--rotate .Wallop-item--hideNext { z-index: 2; }
.Wallop--rotate .Wallop-item--showPrevious,
.Wallop--rotate .Wallop-item--showNext { z-index: 1; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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