wallop/css/wallop--fold.css

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

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

.Wallop--fold .Wallop-list {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

.Wallop--fold .Wallop-item--showPrevious,
.Wallop--fold .Wallop-item--showNext {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.Wallop--fold .Wallop-item--showPrevious {
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  -moz-animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  -ms-animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  animation: foldFromLeft 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  z-index: 2;
}

.Wallop--fold .Wallop-item--showNext {
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  -moz-animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  -ms-animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  animation: foldFromRight 550ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
  z-index: 1;
}

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

@-webkit-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-moz-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-ms-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-webkit-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-moz-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-ms-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}