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