libs/js/jquery-mobile-1.0.1pre/css/structure/jquery.mobile.transitions.css

   1 .spin  {
   2         -webkit-transform: rotate(360deg);
   3         -webkit-animation-name: spin;
   4         -webkit-animation-duration: 1s;
   5         -webkit-animation-iteration-count:  infinite;
   6         -webkit-animation-timing-function: linear;
   7 }
   8 @-webkit-keyframes spin {
   9         from {-webkit-transform: rotate(0deg);}
  10         to {-webkit-transform: rotate(360deg);}
  11 }
  12
  13 /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
  14 Built by David Kaneda and maintained by Jonathan Stark.
  15 */
  16 .in, .out {
  17         -webkit-animation-timing-function: ease-in-out;
  18         -webkit-animation-duration: 350ms;
  19 }
  20
  21
  22 .slide.out {
  23         -webkit-transform: translateX(-100%);
  24         -webkit-animation-name: slideouttoleft;
  25 }
  26
  27 .slide.in {
  28         -webkit-transform: translateX(0);
  29         -webkit-animation-name: slideinfromright;
  30 }
  31
  32 .slide.out.reverse {
  33         -webkit-transform: translateX(100%);
  34         -webkit-animation-name: slideouttoright;
  35 }
  36
  37 .slide.in.reverse {
  38         -webkit-transform: translateX(0);
  39         -webkit-animation-name: slideinfromleft;
  40 }
  41
  42 .slideup.out {
  43         -webkit-animation-name: dontmove;
  44         z-index: 0;
  45 }
  46
  47 .slideup.in {
  48         -webkit-transform: translateY(0);
  49         -webkit-animation-name: slideinfrombottom;
  50         z-index: 10;
  51 }
  52
  53 .slideup.in.reverse {
  54         z-index: 0;
  55         -webkit-animation-name: dontmove;
  56 }
  57
  58 .slideup.out.reverse {
  59         -webkit-transform: translateY(100%);
  60         z-index: 10;
  61         -webkit-animation-name: slideouttobottom;
  62 }
  63
  64 .slidedown.out {
  65         -webkit-animation-name: dontmove;
  66         z-index: 0;
  67 }
  68
  69 .slidedown.in {
  70         -webkit-transform: translateY(0);
  71         -webkit-animation-name: slideinfromtop;
  72         z-index: 10;
  73 }
  74
  75 .slidedown.in.reverse {
  76         z-index: 0;
  77         -webkit-animation-name: dontmove;
  78 }
  79
  80 .slidedown.out.reverse {
  81         -webkit-transform: translateY(-100%);
  82         z-index: 10;
  83         -webkit-animation-name: slideouttotop;
  84 }
  85
  86 @-webkit-keyframes slideinfromright {
  87     from { -webkit-transform: translateX(100%); }
  88     to { -webkit-transform: translateX(0); }
  89 }
  90
  91 @-webkit-keyframes slideinfromleft {
  92     from { -webkit-transform: translateX(-100%); }
  93     to { -webkit-transform: translateX(0); }
  94 }
  95
  96 @-webkit-keyframes slideouttoleft {
  97     from { -webkit-transform: translateX(0); }
  98     to { -webkit-transform: translateX(-100%); }
  99 }
 100
 101 @-webkit-keyframes slideouttoright {
 102     from { -webkit-transform: translateX(0); }
 103     to { -webkit-transform: translateX(100%); }
 104 }
 105
 106 @-webkit-keyframes slideinfromtop {
 107     from { -webkit-transform: translateY(-100%); }
 108     to { -webkit-transform: translateY(0); }
 109 }
 110
 111 @-webkit-keyframes slideinfrombottom {
 112     from { -webkit-transform: translateY(100%); }
 113     to { -webkit-transform: translateY(0); }
 114 }
 115
 116 @-webkit-keyframes slideouttobottom {
 117     from { -webkit-transform: translateY(0); }
 118     to { -webkit-transform: translateY(100%); }
 119 }
 120
 121 @-webkit-keyframes slideouttotop {
 122     from { -webkit-transform: translateY(0); }
 123     to { -webkit-transform: translateY(-100%); }
 124 }
 125 @-webkit-keyframes fadein {
 126     from { opacity: 0; }
 127     to { opacity: 1; }
 128 }
 129
 130 @-webkit-keyframes fadeout {
 131     from { opacity: 1; }
 132     to { opacity: 0; }
 133 }
 134
 135 .fade.out {
 136         z-index: 0;
 137         -webkit-animation-name: fadeout;
 138 }
 139
 140 .fade.in {
 141         opacity: 1;
 142         z-index: 10;
 143         -webkit-animation-name: fadein;
 144 }
 145
 146 /* The properties in this rule are only necessary for the 'flip' transition.
 147  * We need specify the perspective to create a projection matrix. This will add
 148  * some depth as the element flips. The depth number represents the distance of
 149  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 150  * value.
 151  */
 152 .viewport-flip {
 153         -webkit-perspective: 1000;
 154         position: absolute;
 155 }
 156
 157 .ui-mobile-viewport-transitioning,
 158 .ui-mobile-viewport-transitioning .ui-page {
 159         width: 100%;
 160         height: 100%;
 161         overflow: hidden;
 162 }
 163
 164 .flip {
 165         -webkit-animation-duration: .65s;
 166         -webkit-backface-visibility:hidden;
 167         -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. */
 168 }
 169
 170 .flip.out {
 171         -webkit-transform: rotateY(-180deg) scale(.8);
 172         -webkit-animation-name: flipouttoleft;
 173 }
 174
 175 .flip.in {
 176         -webkit-transform: rotateY(0) scale(1);
 177         -webkit-animation-name: flipinfromleft;
 178 }
 179
 180 /* Shake it all about */
 181
 182 .flip.out.reverse {
 183         -webkit-transform: rotateY(180deg) scale(.8);
 184         -webkit-animation-name: flipouttoright;
 185 }
 186
 187 .flip.in.reverse {
 188         -webkit-transform: rotateY(0) scale(1);
 189         -webkit-animation-name: flipinfromright;
 190 }
 191
 192 @-webkit-keyframes flipinfromright {
 193     from { -webkit-transform: rotateY(-180deg) scale(.8); }
 194     to { -webkit-transform: rotateY(0) scale(1); }
 195 }
 196
 197 @-webkit-keyframes flipinfromleft {
 198     from { -webkit-transform: rotateY(180deg) scale(.8); }
 199     to { -webkit-transform: rotateY(0) scale(1); }
 200 }
 201
 202 @-webkit-keyframes flipouttoleft {
 203     from { -webkit-transform: rotateY(0) scale(1); }
 204     to { -webkit-transform: rotateY(-180deg) scale(.8); }
 205 }
 206
 207 @-webkit-keyframes flipouttoright {
 208     from { -webkit-transform: rotateY(0) scale(1); }
 209     to { -webkit-transform: rotateY(180deg) scale(.8); }
 210 }
 211
 212
 213 /* Hackish, but reliable. */
 214
 215 @-webkit-keyframes dontmove {
 216     from { opacity: 1; }
 217     to { opacity: 1; }
 218 }
 219
 220 .pop {
 221         -webkit-transform-origin: 50% 50%;
 222 }
 223
 224 .pop.in {
 225         -webkit-transform: scale(1);
 226     opacity: 1;
 227         -webkit-animation-name: popin;
 228         z-index: 10;
 229 }
 230
 231 .pop.in.reverse {
 232         z-index: 0;
 233         -webkit-animation-name: dontmove;
 234 }
 235
 236 .pop.out.reverse {
 237         -webkit-transform: scale(.2);
 238         opacity: 0;
 239         -webkit-animation-name: popout;
 240         z-index: 10;
 241 }
 242
 243 @-webkit-keyframes popin {
 244     from {
 245         -webkit-transform: scale(.2);
 246         opacity: 0;
 247     }
 248     to {
 249         -webkit-transform: scale(1);
 250         opacity: 1;
 251     }
 252 }
 253
 254 @-webkit-keyframes popout {
 255     from {
 256         -webkit-transform: scale(1);
 257         opacity: 1;
 258     }
 259     to {
 260         -webkit-transform: scale(.2);
 261         opacity: 0;
 262     }
 263 }