jquery-mobile/themes/default/jquery.mobile.transitions.css
jblas@adobe.com acbec71e29 Fixed #117
"Global: blinky page transitions"

According to the CSS Animations spec as soon as an animation completes, any properties that were animated revert back to their previous values. This means that the CSS rule that refers to the animation by name must also have the "To" property values specified.
2010-10-28 23:40:11 -07:00

244 lines
No EOL
4.9 KiB
CSS

/*
* 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-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;
-webkit-animation-duration: 350ms;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
z-index: 10;
}
.slideup.out {
-webkit-animation-name: dontmove;
z-index: 0;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
z-index: 10;
-webkit-animation-name: slideouttobottom;
}
.slideup.in.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}
.slidedown.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
z-index: 10;
}
.slidedown.out {
-webkit-animation-name: dontmove;
z-index: 0;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
z-index: 10;
-webkit-animation-name: slideouttotop;
}
.slidedown.in.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
@-webkit-keyframes slideinfromtop {
from { -webkit-transform: translateY(-100%); }
to { -webkit-transform: translateY(0); }
}
@-webkit-keyframes slideinfrombottom {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(100%); }
}
@-webkit-keyframes slideouttotop {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.fade.in {
opacity: 1;
z-index: 10;
-webkit-animation-name: fadein;
}
.fade.out {
z-index: 0;
}
.flip {
-webkit-animation-duration: .65s;
}
.flip.in {
-webkit-transform: rotateY(0) scale(1);
-webkit-animation-name: flipinfromleft;
}
.flip.out {
-webkit-transform: rotateY(-180deg) scale(.8);
-webkit-animation-name: flipouttoleft;
}
/* Shake it all about */
.flip.in.reverse {
-webkit-transform: rotateY(0) scale(1);
-webkit-animation-name: flipinfromright;
}
.flip.out.reverse {
-webkit-transform: rotateY(180deg) scale(.8);
-webkit-animation-name: flipouttoright;
}
@-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); }
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0) scale(1); }
to { -webkit-transform: rotateY(-180deg) scale(.8); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) scale(1); }
to { -webkit-transform: rotateY(180deg) scale(.8); }
}
/* Hackish, but reliable. */
@-webkit-keyframes dontmove {
from { opacity: 1; }
to { opacity: 1; }
}
.pop {
-webkit-transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
opacity: 1;
-webkit-animation-name: popin;
z-index: 10;
}
.pop.out.reverse {
-webkit-transform: scale(.2);
opacity: 0;
-webkit-animation-name: popout;
z-index: 10;
}
.pop.in.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}
@-webkit-keyframes popin {
from {
-webkit-transform: scale(.2);
opacity: 0;
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes popout {
from {
-webkit-transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(.2);
opacity: 0;
}
}