src/themes/tizen/common/jquery.mobile.transitions.css

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