transitions.css #1

/* dojox.mobile.View */

.mblView {
    left: 0;
}

.mblView.in {
	position: absolute;
}

.slide.out {
	-webkit-animation-duration: .4s;
	-webkit-animation-name: slideOut;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translateX(-100%);
}
.slide.in {
	-webkit-animation-duration: .4s;
	-webkit-animation-name: slideIn;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translateX(0px);
}
.slide.out.reverse {
	-webkit-animation-name: slideOutReverse;
}
.slide.in.reverse {
	-webkit-animation-name: slideInReverse;
}
@-webkit-keyframes slideOut {
	from { -webkit-transform: translateX(0px); }
	to { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes slideIn {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(0px); }
}
@-webkit-keyframes slideOutReverse {
	from { -webkit-transform: translateX(0px); }
	to { -webkit-transform: translateX(100%); }
}
@-webkit-keyframes slideInReverse {
	from { -webkit-transform: translateX(-100%); }
	to { -webkit-transform: translateX(0px); }
}

.slidev.out {
	-webkit-animation-duration: .4s;
	-webkit-animation-name: slideVOut;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translateY(-100%);
}
.slidev.in {
	-webkit-animation-duration: .4s;
	-webkit-animation-name: slideVIn;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translateY(0px);
}
.slidev.out.reverse {
	-webkit-animation-name: slideVOutReverse;
}
.slidev.in.reverse {
	-webkit-animation-name: slideVInReverse;
}
@-webkit-keyframes slideVOut {
	from { -webkit-transform: translateY(0px); }
	to { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes slideVIn {
	from { -webkit-transform: translateY(100%); }
	to { -webkit-transform: translateY(0px); }
}
@-webkit-keyframes slideVOutReverse {
	from { -webkit-transform: translateY(0px); }
	to { -webkit-transform: translateY(100%); }
}
@-webkit-keyframes slideVInReverse {
	from { -webkit-transform: translateY(-100%); }
	to { -webkit-transform: translateY(0px); }
}

.flip.out {
	-webkit-animation-duration: .6s;
	-webkit-animation-name: flipOut;
	-webkit-animation-timing-function: ease-in;
	-webkit-transform: rotateY(90deg);
}
.flip.in {
	-webkit-animation-duration: .6s;
	-webkit-animation-name: flipIn;
	-webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes flipOut {
	0% { -webkit-transform: rotateY(0deg) scale(1); }
	50% { -webkit-transform: rotateY(90deg) scale(.8); }
	100% { -webkit-transform: rotateY(90deg) scale(.8); }
}

@-webkit-keyframes flipIn {
	0% { -webkit-transform: rotateY(90deg) scale(.8); }
	50% { -webkit-transform: rotateY(90deg) scale(.8); }
	100% { -webkit-transform: rotateY(0deg) scale(1); }
}

.fade.out {
	-webkit-animation-duration: 1s;
	-webkit-animation-name: fadeOut;
	-webkit-animation-timing-function: ease-in;
}
.fade.out.fast {
	-webkit-animation-duration: 0.3s;
}
.fade.in {
	-webkit-animation-duration: 1s;
	-webkit-animation-name: fadeIn;
	-webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}