jquery-mobile/css/structure/jquery.mobile.transitions.slide.css
toddparker 21c53b646f Moved non-3D rules to the bottom to hide the ugliness
Rule order doesn't seem to matter because of specificity.
2012-01-13 17:27:52 +07:00

201 lines
No EOL
5.3 KiB
CSS

.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
}
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
z-index: 0;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
z-index: 10;
}
.slideup.in.reverse {
z-index: 0;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
.slideup.out.reverse {
z-index: 10;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-webkit-animation-name: slideouttobottom;
-moz-animation-name: slideouttobottom;
}
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
z-index: 0;
}
.slidedown.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
-moz-transform: translateY(0);
-moz-animation-name: slideinfromtop;
z-index: 10;
}
.slidedown.in.reverse {
z-index: 0;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
z-index: 10;
-webkit-animation-name: slideouttotop;
-moz-animation-name: slideouttotop;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromright {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(100%); }
}
@-webkit-keyframes slideinfromtop {
from { -webkit-transform: translateY(-100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromtop {
from { -moz-transform: translateY(-100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideinfrombottom {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfrombottom {
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttobottom {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(100%); }
}
@-webkit-keyframes slideouttotop {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttotop {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(-100%); }
}
/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */
.ui-unsupported-csstransform3d .slide.in,
.ui-unsupported-csstransform3d .slide.in.reverse,
.ui-unsupported-csstransform3d .slideup.in.reverse,
.ui-unsupported-csstransform3d .slidedown.in.reverse {
z-index:10;
-webkit-animation-name: nofade;
-webkit-animation-duration: 500ms;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: nofade;
-moz-animation-duration: 500ms;
-moz-animation-timing-function: ease-in;
}
/* Also get rid of the fade out animation and use the same timing */
.ui-unsupported-csstransform3d .slideup.out,
.ui-unsupported-csstransform3d .slidedown.out
{
z-index:0;
-webkit-animation-name: nofade;
-webkit-animation-duration: 500ms;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: nofade;
-moz-animation-duration: 500ms;
-moz-animation-timing-function: ease-in;
}
/* use similiar timing for slides that we don't need to exclude fades from */
.ui-unsupported-csstransform3d .slide.out,
.ui-unsupported-csstransform3d .slide.out.reverse,
.ui-unsupported-csstransform3d .slideup.in,
.ui-unsupported-csstransform3d .slideup.out.reverse,
.ui-unsupported-csstransform3d .slidedown.out.reverse,
.ui-unsupported-csstransform3d .slidedown.in {
-webkit-animation-duration: 500ms;
-webkit-animation-timing-function: ease-out;
-moz-animation-duration: 500ms;
-moz-animation-timing-function: ease-out;
}