jquery-mobile/css/structure/jquery.mobile.transitions.slide.css
toddparker f53ac0da7f Speedier transition timing
Also added duration to some rules to tweak timing and make them more
reliable
2012-01-16 23:41:37 -05:00

54 lines
No EOL
1.4 KiB
CSS

/* slide transition */
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
-webkit-animation-duration: 225ms;
-moz-animation-duration: 225ms;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
@-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%); }
}