diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 5cdb6036..6f08802b 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -4,54 +4,9 @@ * 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; -} -.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; -} - -.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 */ +/* for non-3d supporting browsers, fallback to fade */ .ui-unsupported-csstransform3d .flip.out, .ui-unsupported-csstransform3d .flip.out.reverse { z-index: 0; @@ -62,6 +17,68 @@ -moz-animation-name: fadeout; } +.ui-unsupported-csstransform3d .flip.in, +.ui-unsupported-csstransform3d .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 3d supporting browsers, use flip */ + +.ui-supported-csstransform3d .viewport-flip { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} + +.ui-supported-csstransform3d .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. */ +} + +.ui-supported-csstransform3d .flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; +} + +.ui-supported-csstransform3d .flip.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 150ms; + -moz-animation-name: fadein; +} + +.ui-supported-csstransform3d .flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; +} + +.ui-supported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + + + @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-180deg); }