diff --git a/css/structure/jquery.mobile.transitions.fade.css b/css/structure/jquery.mobile.transitions.fade.css index 8fbfef8d..a22c76a5 100644 --- a/css/structure/jquery.mobile.transitions.fade.css +++ b/css/structure/jquery.mobile.transitions.fade.css @@ -1,77 +1,37 @@ -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } } -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } } -.pop.out { +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +.fade.out { z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.fade.in { + opacity: 1; z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 356d0591..135f4439 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -1,195 +1,3 @@ -.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; -} - -.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; -} - -.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%); } -} - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - /* The properties in this 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 @@ -202,13 +10,6 @@ position: absolute; } -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - .flip { -webkit-animation-duration: .65s; -webkit-backface-visibility:hidden; @@ -263,7 +64,6 @@ -moz-animation-name: fadeout; } - @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg); } to { -webkit-transform: rotateY(0); } @@ -298,85 +98,4 @@ @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0) ; } to { -moz-transform: rotateY(180deg) ; } -} - - - -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; -} - -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; -} - -.pop.out { - z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); - opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; - z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 356d0591..d72110b1 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -1,307 +1,3 @@ -.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; -} - -.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; -} - -.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%); } -} - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* The properties in this 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. - */ -.viewport-flip { - -webkit-perspective: 1000; - -moz-perspective: 1000; - position: absolute; -} - -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - -.flip { - -webkit-animation-duration: .65s; - -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. */ - -moz-animation-duration: .65s; - -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -} - -.flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); - -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); - -moz-animation-name: flipouttoleft; -} - -.flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; -} - -/* Shake it all about */ - -.flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); - -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); - -moz-animation-name: flipouttoright; -} - -.flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* for non-3d supporting browsers, use fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - - -@-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipouttoleft { - from { -webkit-transform: rotateY(0); } - to { -webkit-transform: rotateY(-180deg); } -} -@-moz-keyframes flipouttoleft { - from { -moz-transform: rotateY(0); } - to { -moz-transform: rotateY(-180deg); } -} - -@-webkit-keyframes flipouttoright { - from { -webkit-transform: rotateY(0) ; } - to { -webkit-transform: rotateY(180deg); } -} -@-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) ; } - to { -moz-transform: rotateY(180deg) ; } -} - - - .pop { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; @@ -323,7 +19,6 @@ } - .pop.in.reverse { z-index: 0; -webkit-animation-name: fadein; @@ -349,6 +44,7 @@ opacity: 1; } } + @-moz-keyframes popin { from { -moz-transform: scale(.8); @@ -370,6 +66,7 @@ opacity: 0; } } + @-moz-keyframes popout { from { -moz-transform: scale(1);