@-webkit-keyframes flipintobottom {
    from { -webkit-transform: rotateX(90deg); }
    to { -webkit-transform: rotateX(0); }
}
@keyframes flipintobottom {
    from { transform: rotateX(90deg); }
    to { transform: rotateX(0); }
}

@-webkit-keyframes flowouttotop {
    0% { -webkit-transform: translateY(0); }
	60%, 70% { -webkit-transform: translateY(0); }
    100% { -webkit-transform: translateY(-100%); }
}
@keyframes flowouttotop {
    0% { transform: translateY(0); }
	60%, 70% { transform: translateY(0); }
    100% { transform:  translateY(-100%); }
}

.flip {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
	backface-visibility: hidden;
	transform: translateX(0);
}
.flip.out {
	-webkit-transform: rotateY(-90deg);
	-webkit-animation-name: flowouttotop;
	-webkit-animation-duration: 175ms;
	transform: rotateY(-90deg);
	animation-name: flowouttotop;
	animation-duration: 175ms;
}
.flip.in {
	-webkit-animation-name: flipintobottom;
	-webkit-animation-duration: 225ms;
	animation-name: flipintobottom;
	animation-duration: 225ms;
    animation-delay:1000s;
}