wt/resources/moz-transitions.css

/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.spin  {
	-moz-transform: rotate(360deg);
	-moz-animation-name: spin;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count:  infinite;
}
@-moz-keyframes spin {
	from {-moz-transform: rotate(0deg);}
  	to {-moz-transform: rotate(360deg);}
}

/*
  Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
  Built by David Kaneda and maintained by Jonathan Stark.
*/
.slide.in {
	-moz-transform: translate(0,0);
	-moz-animation-name: slideinfromright;
	z-index: 10;
}

.slide.out {
	-moz-transform: translate(-100%,0);
	-moz-animation-name: slideouttoleft;
	z-index: 0;
}

.slide.in.reverse {
	-moz-transform: translate(0,0);
	-moz-animation-name: slideinfromleft;
	z-index: 0;
}

.slide.out.reverse {
	-moz-transform: translate(100%,0);
	-moz-animation-name: slideouttoright;
	z-index: 10;
}

.slideup.in {
	-moz-transform: translate(0,0);
	-moz-animation-name: slideinfrombottom;
	z-index: 10;
}

.slideup.out {
	-moz-animation-name: dontmove;
	z-index: 0;
}

.slideup.out.reverse {
	-moz-transform: translate(0,100%);
	-moz-animation-name: slideouttobottom;
	z-index: 10;
}

.slideup.in.reverse {
	-moz-animation-name: dontmove;
	z-index: 0;
}

.slidedown.in {
	-moz-transform: translate(0,0);
	-moz-animation-name: slideinfromtop;
	z-index: 10;
}

.slidedown.out {
	-moz-animation-name: dontmove;
	z-index: 0;
}

.slidedown.out.reverse {
	-moz-transform: translate(0,-100%);
	-moz-animation-name: slideouttotop;
	z-index: 10;
}

.slidedown.in.reverse {
	-moz-animation-name: dontmove;
	z-index: 0;
}

@-moz-keyframes slideinfromright {
    from { -moz-transform: translate(100%,0); }
    to { -moz-transform: translate(0,0); }
}

@-moz-keyframes slideinfromleft {
    from { -moz-transform: translate(-100%,0); }
    to { -moz-transform: translate(0,0); }
}

@-moz-keyframes slideouttoleft {
    from { -moz-transform: translate(0,0); }
    to { -moz-transform: translate(-100%,0); }
}

@-moz-keyframes slideouttoright {
    from { -moz-transform: translate(0,0); }
    to { -moz-transform: translate(100%,0); }
}

@-moz-keyframes slideinfromtop {
    from { -moz-transform: translate(0,-100%); }
    to { -moz-transform: translate(0,0); }
}

@-moz-keyframes slideinfrombottom {
    from { -moz-transform: translate(0,100%); }
    to { -moz-transform: translate(0,0); }
}

@-moz-keyframes slideouttobottom {
    from { -moz-transform: translate(0,0); }
    to { -moz-transform: translate(0,100%); }
}

@-moz-keyframes slideouttotop {
    from { -moz-transform: translate(0,0); }
    to { -moz-transform: translate(0,-100%); }
}

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

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

@keyframes halffadein {
    from { opacity: 0; }
    to { opacity: 0.5; }
}

@keyframes halffadeout {
    from { opacity: 0.5; }
    to { opacity: 0; }
}

@keyframes bootstrap2fadein {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

@keyframes bootstrap2fadeout {
    from { opacity: 0.8; }
    to { opacity: 0; }
}

.fade.in {
        opacity: 1;
	-moz-animation-name: fadein;
}

.fade.out {
	-moz-animation-name: fadeout;
}

.Wt-dialogcover.fade.in,
.modal-backdrop.fade.in {
	opacity: 0.5;
	animation-name: halffadein;
}

.Wt-dialogcover.fade.out,
.modal-backdrop.fade.out {
	animation-name: halffadeout;
}

.modal-backdrop.Wt-bootstrap2.fade.in {
	opacity: 0.8;
	animation-name: bootstrap2fadein;
}

.modal-backdrop.Wt-bootstrap2.fade.out {
	animation-name: bootstrap2fadeout;
}

/* The properties in this body rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.ui-mobile-viewport-perspective {
	-moz-perspective: 1000;
	position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.flip {
	-moz-animation-duration: .65s;
	-moz-backface-visibility:hidden;
}

.flip.in {
	-moz-transform: rotateY(0) scale(1);
	-moz-animation-name: flipinfromleft;
	z-index: 10;
}

.flip.out {
	-moz-transform: rotateY(-180deg) scale(.8);
	-moz-animation-name: flipouttoleft;
	z-index: 0;
}

/* Shake it all about */

.flip.in.reverse {
	-moz-transform: rotateY(0) scale(1);
	-moz-animation-name: flipinfromright;
	z-index: 0;
}

.flip.out.reverse {
	-moz-transform: rotateY(180deg) scale(.8);
	-moz-animation-name: flipouttoright;
	z-index: 10;
}

@-moz-keyframes flipinfromright {
    from { -moz-transform: rotateY(-180deg) scale(.8); }
    to { -moz-transform: rotateY(0) scale(1); }
}

@-moz-keyframes flipinfromleft {
    from { -moz-transform: rotateY(180deg) scale(.8); }
    to { -moz-transform: rotateY(0) scale(1); }
}

@-moz-keyframes flipouttoleft {
    from { -moz-transform: rotateY(0) scale(1); }
    to { -moz-transform: rotateY(-180deg) scale(.8); }
}

@-moz-keyframes flipouttoright {
    from { -moz-transform: rotateY(0) scale(1); }
    to { -moz-transform: rotateY(180deg) scale(.8); }
}


/* Hackish, but reliable. */

@-moz-keyframes dontmove {
    from { opacity: 1; }
    to { opacity: 1; }
}

.pop {
	-moz-transform-origin: 50% 50%;
}

.pop.in {
	-moz-transform: scale(1);
	-moz-animation-name: popin;
	z-index: 10;
}

.pop.out.reverse {
	-moz-transform: scale(.2);
	-moz-animation-name: popout;
	z-index: 10;
}

.pop.in.reverse {
	-moz-animation-name: dontmove;
	z-index: 0;
}

@-moz-keyframes popin {
    from {
        -moz-transform: scale(.2);
    }
    to {
        -moz-transform: scale(1);
    }
}

@-moz-keyframes popout {
    from {
        -moz-transform: scale(1);
    }
    to {
        -moz-transform: scale(.2);
    }
}


.slide.in.fade {
	-moz-animation-name: slideinfromright, fadein;
	z-index: 10;
}

.slide.out.fade {
	-moz-animation-name: slideinfromright, fadeout;
	z-index: 0;
}

.pop.fade.in {
        -moz-animation-name: popin, fadein;
	z-index: 10;
}

.pop.fade.out {
        -moz-animation-name: popout, fadeout;
	z-index: 0;
}