-/*
-* jQuery Mobile Framework
-* Copyright (c) jQuery Project
-* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
-*/
-.spin {
- -webkit-transform: rotate(360deg);
- -webkit-animation-name: spin;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes spin {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
-}
-
-/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
-Built by David Kaneda and maintained by Jonathan Stark.
-*/
-.in, .out {
- -webkit-animation-timing-function: ease-in-out;
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-mobile-viewport-transitioning,
+.ui-mobile-viewport-transitioning .ui-page {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.in {
+ -ms-animation-timing-function: ease-out;
+ -ms-animation-duration: 350ms;
+ -o-animation-timing-function: ease-out;
+ -o-animation-duration: 350ms;
+ -webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
+}
+
+.out {
+ -ms-animation-timing-function: ease-in;
+ -ms-animation-duration: 225ms;
+ -o-animation-timing-function: ease-in;
+ -o-animation-duration: 225;
+ -webkit-animation-timing-function: ease-in;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-timing-function: ease-in;
+ -moz-animation-duration: 225;
+}
+
+
+/* fade */
+
+@-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 {
+ opacity: 0;
+ -ms-animation-duration: 125ms;
+ -ms-animation-name: fadeout;
+ -o-animation-duration: 125ms;
+ -o-animation-name: fadeout;
+ -webkit-animation-duration: 125ms;
+ -webkit-animation-name: fadeout;
+ -moz-animation-duration: 125ms;
+ -moz-animation-name: fadeout;
+}
+
+.fade.in {
+ opacity: 1;
+ -ms-animation-duration: 225ms;
+ -ms-animation-name: fadein;
+ -o-animation-duration: 225ms;
+ -o-animation-name: fadein;
+ -webkit-animation-duration: 225ms;
+ -webkit-animation-name: fadein;
+ -moz-animation-duration: 225ms;
+ -moz-animation-name: fadein;
+}
+
+
+/* flip */
+
+/* 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 {
+ -ms-perspective: 1000;
+ -o-perspective: 1000;
+ -webkit-perspective: 1000;
+ -moz-perspective: 1000;
+ position: absolute;
+}
+.flip {
+ -webkit-backface-visibility:hidden;
+ -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-backface-visibility:hidden;
+ -moz-transform:translate3d(0, 0, 0);
+}
+
+.flip.out {
+ -webkit-transform: rotateY(-90deg) scale(.9);
+ -webkit-animation-name: flipouttoleft;
+ -webkit-animation-duration: 175ms;
+ -moz-transform: rotateY(-90deg) scale(.9);
+ -moz-animation-name: flipouttoleft;
+ -moz-animation-duration: 175ms;
+}
+
+.flip.in {
+ -webkit-animation-name: flipintoright;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-name: flipintoright;
+ -moz-animation-duration: 225ms;
+}
+
+.flip.out.reverse {
+ -webkit-transform: rotateY(90deg) scale(.9);
+ -webkit-animation-name: flipouttoright;
+ -moz-transform: rotateY(90deg) scale(.9);
+ -moz-animation-name: flipouttoright;
+}
+
+.flip.in.reverse {
+ -webkit-animation-name: flipintoleft;
+ -moz-animation-name: flipintoleft;
+}
+
+@-webkit-keyframes flipouttoleft {
+ from { -webkit-transform: rotateY(0); }
+ to { -webkit-transform: rotateY(-90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoleft {
+ from { -moz-transform: rotateY(0); }
+ to { -moz-transform: rotateY(-90deg) scale(.9); }
+}
+@-webkit-keyframes flipouttoright {
+ from { -webkit-transform: rotateY(0) ; }
+ to { -webkit-transform: rotateY(90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoright {
+ from { -moz-transform: rotateY(0); }
+ to { -moz-transform: rotateY(90deg) scale(.9); }
+}
+@-webkit-keyframes flipintoleft {
+ from { -webkit-transform: rotateY(-90deg) scale(.9); }
+ to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoleft {
+ from { -moz-transform: rotateY(-90deg) scale(.9); }
+ to { -moz-transform: rotateY(0); }
+}
+@-webkit-keyframes flipintoright {
+ from { -webkit-transform: rotateY(90deg) scale(.9); }
+ to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoright {
+ from { -moz-transform: rotateY(90deg) scale(.9); }
+ to { -moz-transform: rotateY(0); }
+}
+
+
+/* flow transition */
+
+.flow {
+ -webkit-transform-origin: 50% 30%;
+ -moz-transform-origin: 50% 30%;
+ -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
+ -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
+}
+.ui-dialog.flow {
+ -webkit-transform-origin: none;
+ -moz-transform-origin: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+}
+.flow.out {
+ -webkit-transform: translate3d(-100%, 0, 0) scale(.7);
+ -webkit-animation-name: flowouttoleft;
+ -webkit-animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-transform: translate3d(-100%, 0, 0) scale(.7);
+ -moz-animation-name: flowouttoleft;
+ -moz-animation-timing-function: ease;
+ -moz-animation-duration: 350ms;
+}
+
+.flow.in {
+ -webkit-transform: translate3d(0, 0, 0) scale(1);
+ -webkit-animation-name: flowinfromright;
+ -webkit-animation-timing-function: ease;
+ -webkit-animation-duration: 350ms;
+ -moz-transform: translate3d(0, 0, 0) scale(1);
+ -moz-animation-name: flowinfromright;
+ -moz-animation-timing-function: ease;
+ -moz-animation-duration: 350ms;
+}
+
+.flow.out.reverse {
+ -webkit-transform: translate3d(100%, 0, 0);
+ -webkit-animation-name: flowouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: flowouttoright;
+}
+
+.flow.in.reverse {
+ -webkit-animation-name: flowinfromleft;
+ -moz-animation-name: flowinfromleft;
+}
+
+@-webkit-keyframes flowouttoleft {
+ 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
+}
+@-moz-keyframes flowouttoleft {
+ 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translateX(-100%) scale(.7); }
+}
+
+@-webkit-keyframes flowouttoright {
+ 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
+}
+@-moz-keyframes flowouttoright {
+ 0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+ 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
+}
+
+@-webkit-keyframes flowinfromleft {
+ 0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
+ 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-moz-keyframes flowinfromleft {
+ 0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); }
+ 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-webkit-keyframes flowinfromright {
+ 0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
+ 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
+}
+@-moz-keyframes flowinfromright {
+ 0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
+ 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
+ 100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
+}
+
+
+/* pop */
+
+.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;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+}
+
+.pop.out {
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ opacity: 0;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+}
+
+.pop.in.reverse {
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+}
+
+.pop.out.reverse {
+ -webkit-transform: scale(.8);
+ -moz-transform: scale(.8);
+ -webkit-animation-name: popout;
+ -moz-animation-name: popout;
+}
+
+@-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;
+ }
}
+/* slide */
+
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+ from { -webkit-transform: translate3d(100%, 0, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromright {
+ from { -moz-transform: translate3d(100%, 0, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+ from { -webkit-transform: translate3d(-100%, 0, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromleft {
+ from { -moz-transform: translate3d(-100%, 0, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
+}
+
+/* keyframes for slideout to sides */
+@-webkit-keyframes slideouttoleft {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(-100%, 0, 0); }
+}
+@-moz-keyframes slideouttoleft {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(-100%, 0, 0); }
+}
+
+@-webkit-keyframes slideouttoright {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(100%, 0, 0); }
+}
+@-moz-keyframes slideouttoright {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(100%, 0, 0); }
+}
+
+.slide.out, .slide.in {
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
+}
.slide.out {
- -webkit-transform: translateX(-100%);
+ -webkit-transform: translate3d(-100%, 0, 0);
-webkit-animation-name: slideouttoleft;
+ -moz-transform: translate3d(-100%, 0, 0);
+ -moz-animation-name: slideouttoleft;
}
.slide.in {
- -webkit-transform: translateX(0);
+ -webkit-transform: translate3d(0, 0, 0);
-webkit-animation-name: slideinfromright;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfromright;
}
.slide.out.reverse {
- -webkit-transform: translateX(100%);
+ -webkit-transform: translate3d(100%, 0, 0);
-webkit-animation-name: slideouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: slideouttoright;
}
.slide.in.reverse {
- -webkit-transform: translateX(0);
+ -webkit-transform: translate3d(0, 0, 0);
-webkit-animation-name: slideinfromleft;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfromleft;
}
-.slideup.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
-}
-
-.slideup.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: slideinfrombottom;
- z-index: 10;
-}
-
-.slideup.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
-}
-
-.slideup.out.reverse {
- -webkit-transform: translateY(100%);
- z-index: 10;
- -webkit-animation-name: slideouttobottom;
-}
+/* slide down */
.slidedown.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
}
.slidedown.in {
- -webkit-transform: translateY(0);
+ -webkit-transform: translate3d(0, 0, 0);
-webkit-animation-name: slideinfromtop;
- z-index: 10;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfromtop;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
}
.slidedown.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 150ms;
+ -moz-animation-duration: 150ms;
}
.slidedown.out.reverse {
- -webkit-transform: translateY(-100%);
- z-index: 10;
+ -webkit-transform: translate3d(0, -100%, 0);
+ -moz-transform: translate3d(0, -100%, 0);
-webkit-animation-name: slideouttotop;
+ -moz-animation-name: slideouttotop;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
}
-@-webkit-keyframes slideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
+@-webkit-keyframes slideinfromtop {
+ from { -webkit-transform: translate3d(0, -100%, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfromtop {
+ from { -moz-transform: translate3d(0, -100%, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
}
-@-webkit-keyframes slideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
+@-webkit-keyframes slideouttotop {
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(0, -100%, 0); }
+}
+@-moz-keyframes slideouttotop {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(0, -100%, 0); }
}
-@-webkit-keyframes slideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
+/* slide up */
+
+.slideup.out {
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
}
-@-webkit-keyframes slideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
+.slideup.in {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: slideinfrombottom;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: slideinfrombottom;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
}
-@-webkit-keyframes slideinfromtop {
- from { -webkit-transform: translateY(-100%); }
- to { -webkit-transform: translateY(0); }
+.slideup.in.reverse {
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 150ms;
+ -moz-animation-duration: 150ms;
+}
+
+.slideup.out.reverse {
+ -webkit-transform: translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0);
+ -webkit-animation-name: slideouttobottom;
+ -moz-animation-name: slideouttobottom;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
- from { -webkit-transform: translateY(100%); }
- to { -webkit-transform: translateY(0); }
+ from { -webkit-transform: translate3d(0, 100%, 0); }
+ to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideinfrombottom {
+ from { -moz-transform: translate3d(0, 100%, 0); }
+ to { -moz-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slideouttobottom {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(100%); }
+ from { -webkit-transform: translate3d(0, 0, 0); }
+ to { -webkit-transform: translate3d(0, 100%, 0); }
}
-
-@-webkit-keyframes slideouttotop {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(-100%); }
+@-moz-keyframes slideouttobottom {
+ from { -moz-transform: translate3d(0, 0, 0); }
+ to { -moz-transform: translate3d(0, 100%, 0); }
}
-@-webkit-keyframes fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+
+/* slide fade */
+
+.slidefade.out {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -webkit-animation-name: slideouttoleft;
+ -moz-transform: translate3d(-100%, 0, 0);
+ -moz-animation-name: slideouttoleft;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-duration: 225ms;
}
-@-webkit-keyframes fadeout {
- from { opacity: 1; }
- to { opacity: 0; }
+.slidefade.in {
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-animation-name: fadein;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
}
-.fade.out {
- z-index: 0;
- -webkit-animation-name: fadeout;
+.slidefade.out.reverse {
+ -webkit-transform: translate3d(100%, 0, 0);
+ -webkit-animation-name: slideouttoright;
+ -moz-transform: translate3d(100%, 0, 0);
+ -moz-animation-name: slideouttoright;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
}
-.fade.in {
- opacity: 1;
- z-index: 10;
+.slidefade.in.reverse {
+ -webkit-transform: translate3d(0, 0, 0);
-webkit-animation-name: fadein;
+ -moz-transform: translate3d(0, 0, 0);
+ -moz-animation-name: fadein;
+ -webkit-animation-duration: 200ms;
+ -moz-animation-duration: 200ms;
}
/* The properties in this rule are only necessary for the 'flip' transition.
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
-.viewport-flip {
+
+.viewport-turn {
-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;
+.turn {
-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. */
+ -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -webkit-transform-origin: 0;
+ -moz-backface-visibility:hidden;
+ -moz-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-transform-origin: 0;
}
-.flip.out {
- -webkit-transform: rotateY(-180deg) scale(.8);
+.turn.out {
+ -webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
+ -moz-transform: rotateY(-90deg) scale(.9);
+ -moz-animation-name: flipouttoleft;
+ -webkit-animation-duration: 125ms;
+ -moz-animation-duration: 125ms;
}
-.flip.in {
- -webkit-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromleft;
+.turn.in {
+ -webkit-animation-name: flipintoright;
+ -moz-animation-name: flipintoright;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
}
-/* Shake it all about */
-
-.flip.out.reverse {
- -webkit-transform: rotateY(180deg) scale(.8);
+.turn.out.reverse {
+ -webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
+ -moz-transform: rotateY(90deg) scale(.9);
+ -moz-animation-name: flipouttoright;
}
-.flip.in.reverse {
- -webkit-transform: rotateY(0) scale(1);
- -webkit-animation-name: flipinfromright;
-}
-
-@-webkit-keyframes flipinfromright {
- from { -webkit-transform: rotateY(-180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
-}
-
-@-webkit-keyframes flipinfromleft {
- from { -webkit-transform: rotateY(180deg) scale(.8); }
- to { -webkit-transform: rotateY(0) scale(1); }
+.turn.in.reverse {
+ -webkit-animation-name: flipintoleft;
+ -moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(-180deg) scale(.8); }
+ from { -webkit-transform: rotateY(0); }
+ to { -webkit-transform: rotateY(-90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoleft {
+ from { -moz-transform: rotateY(0); }
+ to { -moz-transform: rotateY(-90deg) scale(.9); }
}
-
@-webkit-keyframes flipouttoright {
- from { -webkit-transform: rotateY(0) scale(1); }
- to { -webkit-transform: rotateY(180deg) scale(.8); }
+ from { -webkit-transform: rotateY(0) ; }
+ to { -webkit-transform: rotateY(90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoright {
+ from { -moz-transform: rotateY(0); }
+ to { -moz-transform: rotateY(90deg) scale(.9); }
+}
+@-webkit-keyframes flipintoleft {
+ from { -webkit-transform: rotateY(-90deg) scale(.9); }
+ to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoleft {
+ from { -moz-transform: rotateY(-90deg) scale(.9); }
+ to { -moz-transform: rotateY(0); }
+}
+@-webkit-keyframes flipintoright {
+ from { -webkit-transform: rotateY(90deg) scale(.9); }
+ to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoright {
+ from { -moz-transform: rotateY(90deg) scale(.9); }
+ to { -moz-transform: rotateY(0); }
}
-/* Hackish, but reliable. */
+/* depth */
-@-webkit-keyframes dontmove {
- from { opacity: 1; }
- to { opacity: 1; }
+.depth {
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
}
-.pop {
- -webkit-transform-origin: 50% 50%;
+.depth.out {
+ -webkit-animation-name: depthout;
+ -moz-animation-name: depthout;
+ opacity: 0;
+ -webkit-animation-duration: 250ms;
+ -moz-animation-duration: 250ms;
+ -webkit-animation-timing-function: ease;
+ -moz-animation-timing-function: ease;
}
-.pop.in {
+.depth.in {
-webkit-transform: scale(1);
- opacity: 1;
- -webkit-animation-name: popin;
- z-index: 10;
+ -moz-transform: scale(1);
+ opacity: 1;
+ -webkit-animation-name: depthin;
+ -moz-animation-name: depthin;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+ -webkit-animation-timing-function: ease;
+ -moz-animation-timing-function: ease;
}
-.pop.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
+.depth.in.reverse {
+ -webkit-animation-name: depthinreverse;
+ -moz-animation-name: depthinreverse;
}
-.pop.out.reverse {
- -webkit-transform: scale(.2);
- opacity: 0;
- -webkit-animation-name: popout;
- z-index: 10;
+.depth.out.reverse {
+ -webkit-transform: scale(.9);
+ -moz-transform: scale(.9);
+ -webkit-animation-name: depthoutreverse;
+ -moz-animation-name: depthoutreverse;
}
-@-webkit-keyframes popin {
+@-webkit-keyframes depthout {
from {
- -webkit-transform: scale(.2);
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: scale(1.1);
opacity: 0;
}
+}
+
+@-moz-keyframes depthout {
+ from {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
to {
+ -moz-transform: scale(1.1);
+ opacity: 0;
+ }
+}
+
+@-webkit-keyframes depthin {
+ 0% {
+ -webkit-transform: scale(.9);
+ opacity: 0;
+ }
+ 30% {
+ -webkit-transform: scale(.9);
+ opacity: 0;
+ }
+ 100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
-@-webkit-keyframes popout {
+@-moz-keyframes depthin {
+ 0% {
+ -moz-transform: scale(.9);
+ opacity: 0;
+ }
+ 30% {
+ -moz-transform: scale(.9);
+ opacity: 0;
+ }
+ 100% {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes depthinreverse {
+ 0% {
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ -webkit-transform: scale(1.1);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-moz-keyframes depthinreverse {
+ 0% {
+ -moz-transform: scale(1.1);
+ opacity: 0;
+ }
+ 30% {
+ -moz-transform: scale(1.1);
+ opacity: 0;
+ }
+ 100% {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes depthoutreverse {
from {
-webkit-transform: scale(1);
opacity: 1;
}
to {
- -webkit-transform: scale(.2);
+ -webkit-transform: scale(.9);
+ opacity: 0;
+ }
+}
+
+@-moz-keyframes depthoutreverse {
+ from {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -moz-transform: scale(.9);
opacity: 0;
}
-}
\ No newline at end of file
+}
projects / platform / framework / web / web-ui-fw.git / blobdiff