diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 9213d2f3..ada5cf22 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,20 +1,3 @@ -/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ -Built by David Kaneda and maintained by Jonathan Stark. -*/ -.in { - -webkit-animation-timing-function: ease-out; - -webkit-animation-duration: 325ms; - -moz-animation-timing-function: ease-out; - -moz-animation-duration: 325ms; -} -.out { - -webkit-animation-timing-function: ease-in; - -webkit-animation-duration: 250ms; - -moz-animation-timing-function: ease-in; - -moz-animation-duration: 250ms; -} - - .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -170,230 +153,3 @@ Built by David Kaneda and maintained by Jonathan Stark. 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%; -} - -.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