styles/xf.animations.less

.xf-viewport-transitioning,
.xf-viewport-transitioning .xf-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    .backface-visibility(hidden);
    .transform(~"translateZ(0)");
    .transform-style(preserve-3d);
}

.xf-viewport-transitioning {
  position: relative;
}

.in {
	-webkit-animation-timing-function: ease-out;
	   -moz-animation-timing-function: ease-out;
	     -o-animation-timing-function: ease-out;
	        animation-timing-function: ease-out;
			z-index: 3;
    .transform(~"translateZ(0)");
}

.out {
	-webkit-animation-timing-function: ease-in;
	   -moz-animation-timing-function: ease-in;
	     -o-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
	        z-index: 2;
    .transform(~"translateZ(0)");
}







@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
	}
	@-moz-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@-o-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}


@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
	}
	@-moz-keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}
	@-o-keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}
	@keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

.fade.out {
    opacity: 1;
    .animation-duration(.2s);
    .animation-name(fadeout);
}

.fade.in {
    opacity: 0;
    .animation-delay(.3s);
    .animation-duration(.4s);
    .animation-name(fadein);
}




@-webkit-keyframes slideleftout {
  from { -webkit-transform: translateX(0); }
  to   { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideleftout {
  from { -moz-transform: translateX(0); }
  to   { -moz-transform: translateX(-100%); }
}
@-o-keyframes slideleftout {
  from { -o-transform: translateX(0); }
  to   { -o-transform: translateX(-100%); }
}
@keyframes slideleftout {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


@-webkit-keyframes slideleftin {
  from { -webkit-transform: translateX(100%); }
  to   { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideleftin {
  from { -moz-transform: translateX(100%); }
  to   { -moz-transform: translateX(0); }
}
@-o-keyframes slideleftin {
  from { -o-transform: translateX(100%); }
  to   { -o-transform: translateX(0); }
}
@keyframes slideleftin {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.slideleft.out {
    z-index: 10;
    .transform(~"translateX(0)");
    .animation-duration(.25s);
    .animation-name(slideleftout);
    .animation-timing-function(linear);
}

.slideleft.in {
    z-index: 10;
    .transform(~"translateX(100%)");
    .animation-duration(.25s);
    .animation-name(slideleftin);
    .animation-timing-function(linear);
}



@-webkit-keyframes sliderightout {
  from { -webkit-transform: translateX(0); }
  to   { -webkit-transform: translateX(100%); }
}
@-moz-keyframes sliderightout {
  from { -moz-transform: translateX(0); }
  to   { -moz-transform: translateX(100%); }
}
@-o-keyframes sliderightout {
  from { -o-transform: translateX(0); }
  to   { -o-transform: translateX(100%); }
}
@keyframes sliderightout {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}


@-webkit-keyframes sliderightin {
  from { -webkit-transform: translateX(-100%); }
  to   { -webkit-transform: translateX(0); }
}
@-moz-keyframes sliderightin {
  from { -moz-transform: translateX(-100%); }
  to   { -moz-transform: translateX(0); }
}
@-o-keyframes sliderightin {
  from { -o-transform: translateX(-100%); }
  to   { -o-transform: translateX(0); }
}
@keyframes sliderightin {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.slideright.out {
  z-index: 10;
  .transform(~"translateX(0)");
  .animation-duration(.25s);
  .animation-name(sliderightout);
  .animation-timing-function(linear);
}

.slideright.in {
  z-index: 10;
  .transform(~"translateX(-100%)");
  .animation-duration(.25s);
  .animation-name(sliderightin);
  .animation-timing-function(linear);
}

.none.out {
  .animation-duration(.0001s);
  .animation-name(fadeout);
  .animation-timing-function(linear);
}

.none.in {
  .animation-duration(.0001s);
  .animation-name(fadein);
  .animation-timing-function(linear);
}