themes/transition/horizontal-slide.css

   1 .csstransitions.csstransforms {
   2   overflow-x: hidden;
   3 }
   4 .csstransitions.csstransforms .deck-container > .slide {
   5   -webkit-transition: -webkit-transform 500ms ease-in-out;
   6   transition: transform 500ms ease-in-out;
   7 }
   8 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
   9   position: absolute;
  10   top: 0;
  11   left: 0;
  12 }
  13 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
  14   position: relative;
  15   left: 0;
  16   top: 0;
  17   -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
  18   transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
  19 }
  20 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
  21   visibility: visible;
  22   -webkit-transform: translate3d(200%, 0, 0);
  23   -ms-transform: translate(200%, 0);
  24   transform: translate3d(200%, 0, 0);
  25 }
  26 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
  27   -webkit-transform: translate3d(-200%, 0, 0);
  28   -ms-transform: translate(-200%, 0);
  29   transform: translate3d(-200%, 0, 0);
  30 }
  31 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
  32   -webkit-transform: translate3d(-400%, 0, 0);
  33   -ms-transform: translate(-400%, 0);
  34   transform: translate3d(-400%, 0, 0);
  35 }
  36 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
  37   -webkit-transform: translate3d(200%, 0, 0);
  38   -ms-transform: translate(200%, 0);
  39   transform: translate3d(200%, 0, 0);
  40 }
  41 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
  42   -webkit-transform: translate3d(400%, 0, 0);
  43   -ms-transform: translate(400%, 0);
  44   transform: translate3d(400%, 0, 0);
  45 }
  46 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
  47   visibility: visible;
  48 }
  49 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
  50   -webkit-transform: none;
  51   -ms-transform: none;
  52   transform: none;
  53 }