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

   1 /* Transitions originally inspired by those from jQtouch, nice work, folks */
   2 .ui-mobile-viewport-transitioning,
   3 .ui-mobile-viewport-transitioning .ui-page {
   4         width: 100%;
   5         height: 100%;
   6         overflow: hidden;
   7 }
   8
   9 .in {
  10         -ms-animation-timing-function: ease-out;
  11         -ms-animation-duration: 350ms;
  12         -o-animation-timing-function: ease-out;
  13         -o-animation-duration: 350ms;
  14         -webkit-animation-timing-function: ease-out;
  15         -webkit-animation-duration: 350ms;
  16         -moz-animation-timing-function: ease-out;
  17         -moz-animation-duration: 350ms;
  18 }
  19
  20 .out {
  21         -ms-animation-timing-function: ease-in;
  22         -ms-animation-duration: 225ms;
  23         -o-animation-timing-function: ease-in;
  24         -o-animation-duration: 225;
  25         -webkit-animation-timing-function: ease-in;
  26         -webkit-animation-duration: 225ms;
  27         -moz-animation-timing-function: ease-in;
  28         -moz-animation-duration: 225;
  29 }
  30
  31
  32 /* fade */
  33
  34 @-webkit-keyframes fadein {
  35     from { opacity: 0; }
  36     to { opacity: 1; }
  37 }
  38
  39 @-moz-keyframes fadein {
  40     from { opacity: 0; }
  41     to { opacity: 1; }
  42 }
  43
  44 @-webkit-keyframes fadeout {
  45     from { opacity: 1; }
  46     to { opacity: 0; }
  47 }
  48
  49 @-moz-keyframes fadeout {
  50     from { opacity: 1; }
  51     to { opacity: 0; }
  52 }
  53
  54 .fade.out {
  55         opacity: 0;
  56         -ms-animation-duration: 125ms;
  57         -ms-animation-name: fadeout;
  58         -o-animation-duration: 125ms;
  59         -o-animation-name: fadeout;
  60         -webkit-animation-duration: 125ms;
  61         -webkit-animation-name: fadeout;
  62         -moz-animation-duration: 125ms;
  63         -moz-animation-name: fadeout;
  64 }
  65
  66 .fade.in {
  67         opacity: 1;
  68         -ms-animation-duration: 225ms;
  69         -ms-animation-name: fadein;
  70         -o-animation-duration: 225ms;
  71         -o-animation-name: fadein;
  72         -webkit-animation-duration: 225ms;
  73         -webkit-animation-name: fadein;
  74         -moz-animation-duration: 225ms;
  75         -moz-animation-name: fadein;
  76 }
  77
  78
  79 /* flip */
  80
  81 /* The properties in this rule are only necessary for the 'flip' transition.
  82  * We need specify the perspective to create a projection matrix. This will add
  83  * some depth as the element flips. The depth number represents the distance of
  84  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
  85  * value.
  86  */
  87
  88 .viewport-flip {
  89         -ms-perspective: 1000;
  90         -o-perspective: 1000;
  91         -webkit-perspective: 1000;
  92         -moz-perspective: 1000;
  93         position: absolute;
  94 }
  95 .flip {
  96         -webkit-backface-visibility:hidden;
  97         -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. */
  98         -moz-backface-visibility:hidden;
  99         -moz-transform:translate3d(0, 0, 0);
 100 }
 101
 102 .flip.out {
 103         -webkit-transform: rotateY(-90deg) scale(.9);
 104         -webkit-animation-name: flipouttoleft;
 105         -webkit-animation-duration: 175ms;
 106         -moz-transform: rotateY(-90deg) scale(.9);
 107         -moz-animation-name: flipouttoleft;
 108         -moz-animation-duration: 175ms;
 109 }
 110
 111 .flip.in {
 112         -webkit-animation-name: flipintoright;
 113         -webkit-animation-duration: 225ms;
 114         -moz-animation-name: flipintoright;
 115         -moz-animation-duration: 225ms;
 116 }
 117
 118 .flip.out.reverse {
 119         -webkit-transform: rotateY(90deg) scale(.9);
 120         -webkit-animation-name: flipouttoright;
 121         -moz-transform: rotateY(90deg) scale(.9);
 122         -moz-animation-name: flipouttoright;
 123 }
 124
 125 .flip.in.reverse {
 126         -webkit-animation-name: flipintoleft;
 127         -moz-animation-name: flipintoleft;
 128 }
 129
 130 @-webkit-keyframes flipouttoleft {
 131     from { -webkit-transform: rotateY(0); }
 132     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 133 }
 134 @-moz-keyframes flipouttoleft {
 135     from { -moz-transform: rotateY(0); }
 136     to { -moz-transform: rotateY(-90deg) scale(.9); }
 137 }
 138 @-webkit-keyframes flipouttoright {
 139     from { -webkit-transform: rotateY(0) ; }
 140     to { -webkit-transform: rotateY(90deg) scale(.9); }
 141 }
 142 @-moz-keyframes flipouttoright {
 143     from { -moz-transform: rotateY(0); }
 144     to { -moz-transform: rotateY(90deg) scale(.9); }
 145 }
 146 @-webkit-keyframes flipintoleft {
 147     from { -webkit-transform: rotateY(-90deg) scale(.9); }
 148     to { -webkit-transform: rotateY(0); }
 149 }
 150 @-moz-keyframes flipintoleft {
 151     from { -moz-transform: rotateY(-90deg) scale(.9); }
 152     to { -moz-transform: rotateY(0); }
 153 }
 154 @-webkit-keyframes flipintoright {
 155     from { -webkit-transform: rotateY(90deg) scale(.9); }
 156     to { -webkit-transform: rotateY(0); }
 157 }
 158 @-moz-keyframes flipintoright {
 159     from { -moz-transform: rotateY(90deg) scale(.9); }
 160     to { -moz-transform: rotateY(0); }
 161 }
 162
 163
 164 /* flow transition */
 165
 166 .flow {
 167         -webkit-transform-origin: 50% 30%;
 168         -moz-transform-origin: 50% 30%;
 169         -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
 170         -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
 171 }
 172 .ui-dialog.flow {
 173         -webkit-transform-origin: none;
 174         -moz-transform-origin: none;
 175         -webkit-box-shadow: none;
 176         -moz-box-shadow: none;
 177 }
 178 .flow.out {
 179         -webkit-transform: translate3d(-100%, 0, 0) scale(.7);
 180         -webkit-animation-name: flowouttoleft;
 181         -webkit-animation-timing-function: ease;
 182         -webkit-animation-duration: 350ms;
 183         -moz-transform: translate3d(-100%, 0, 0) scale(.7);
 184         -moz-animation-name: flowouttoleft;
 185         -moz-animation-timing-function: ease;
 186         -moz-animation-duration: 350ms;
 187 }
 188
 189 .flow.in {
 190         -webkit-transform: translate3d(0, 0, 0) scale(1);
 191         -webkit-animation-name: flowinfromright;
 192         -webkit-animation-timing-function: ease;
 193         -webkit-animation-duration: 350ms;
 194         -moz-transform: translate3d(0, 0, 0) scale(1);
 195         -moz-animation-name: flowinfromright;
 196         -moz-animation-timing-function: ease;
 197         -moz-animation-duration: 350ms;
 198 }
 199
 200 .flow.out.reverse {
 201         -webkit-transform: translate3d(100%, 0, 0);
 202         -webkit-animation-name: flowouttoright;
 203         -moz-transform: translate3d(100%, 0, 0);
 204         -moz-animation-name: flowouttoright;
 205 }
 206
 207 .flow.in.reverse {
 208         -webkit-animation-name: flowinfromleft;
 209         -moz-animation-name: flowinfromleft;
 210 }
 211
 212 @-webkit-keyframes flowouttoleft {
 213     0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 214         60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 215     100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
 216 }
 217 @-moz-keyframes flowouttoleft {
 218     0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 219         60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 220     100% { -moz-transform:  translateX(-100%) scale(.7); }
 221 }
 222
 223 @-webkit-keyframes flowouttoright {
 224     0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 225         60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 226     100% { -webkit-transform:  translate3d(100%, 0, 0) scale(.7); }
 227 }
 228 @-moz-keyframes flowouttoright {
 229     0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 230         60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 231     100% { -moz-transform:  translate3d(100%, 0, 0) scale(.7); }
 232 }
 233
 234 @-webkit-keyframes flowinfromleft {
 235     0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
 236         30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 237     100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 238 }
 239 @-moz-keyframes flowinfromleft {
 240     0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); }
 241         30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 242     100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 243 }
 244 @-webkit-keyframes flowinfromright {
 245     0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
 246         30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 247     100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 248 }
 249 @-moz-keyframes flowinfromright {
 250     0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
 251         30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 252     100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 253 }
 254
 255
 256 /* pop */
 257
 258 .pop {
 259         -webkit-transform-origin: 50% 50%;
 260         -moz-transform-origin: 50% 50%;
 261 }
 262
 263 .pop.in {
 264         -webkit-transform: scale(1);
 265         -moz-transform: scale(1);
 266     opacity: 1;
 267         -webkit-animation-name: popin;
 268         -moz-animation-name: popin;
 269         -webkit-animation-duration: 350ms;
 270         -moz-animation-duration: 350ms;
 271 }
 272
 273 .pop.out {
 274         -webkit-animation-name: fadeout;
 275         -moz-animation-name: fadeout;
 276         opacity: 0;
 277         -webkit-animation-duration: 100ms;
 278         -moz-animation-duration: 100ms;
 279 }
 280
 281 .pop.in.reverse {
 282         -webkit-animation-name: fadein;
 283         -moz-animation-name: fadein;
 284 }
 285
 286 .pop.out.reverse {
 287         -webkit-transform: scale(.8);
 288         -moz-transform: scale(.8);
 289         -webkit-animation-name: popout;
 290         -moz-animation-name: popout;
 291 }
 292
 293 @-webkit-keyframes popin {
 294     from {
 295         -webkit-transform: scale(.8);
 296         opacity: 0;
 297     }
 298     to {
 299         -webkit-transform: scale(1);
 300         opacity: 1;
 301     }
 302 }
 303
 304 @-moz-keyframes popin {
 305     from {
 306         -moz-transform: scale(.8);
 307         opacity: 0;
 308     }
 309     to {
 310         -moz-transform: scale(1);
 311         opacity: 1;
 312     }
 313 }
 314
 315 @-webkit-keyframes popout {
 316     from {
 317         -webkit-transform: scale(1);
 318         opacity: 1;
 319     }
 320     to {
 321         -webkit-transform: scale(.8);
 322         opacity: 0;
 323     }
 324 }
 325
 326 @-moz-keyframes popout {
 327     from {
 328         -moz-transform: scale(1);
 329         opacity: 1;
 330     }
 331     to {
 332         -moz-transform: scale(.8);
 333         opacity: 0;
 334     }
 335 }
 336
 337
 338 /* slide */
 339
 340 /* keyframes for slidein from sides */
 341 @-webkit-keyframes slideinfromright {
 342     from { -webkit-transform: translate3d(100%, 0, 0); }
 343     to { -webkit-transform: translate3d(0, 0, 0); }
 344 }
 345 @-moz-keyframes slideinfromright {
 346     from { -moz-transform: translate3d(100%, 0, 0); }
 347     to { -moz-transform: translate3d(0, 0, 0); }
 348 }
 349
 350 @-webkit-keyframes slideinfromleft {
 351     from { -webkit-transform: translate3d(-100%, 0, 0); }
 352     to { -webkit-transform: translate3d(0, 0, 0); }
 353 }
 354 @-moz-keyframes slideinfromleft {
 355     from { -moz-transform: translate3d(-100%, 0, 0); }
 356     to { -moz-transform: translate3d(0, 0, 0); }
 357 }
 358
 359 /* keyframes for slideout to sides */
 360 @-webkit-keyframes slideouttoleft {
 361     from { -webkit-transform: translate3d(0, 0, 0); }
 362     to { -webkit-transform: translate3d(-100%, 0, 0); }
 363 }
 364 @-moz-keyframes slideouttoleft {
 365     from { -moz-transform: translate3d(0, 0, 0); }
 366     to { -moz-transform: translate3d(-100%, 0, 0); }
 367 }
 368
 369 @-webkit-keyframes slideouttoright {
 370     from { -webkit-transform: translate3d(0, 0, 0); }
 371     to { -webkit-transform: translate3d(100%, 0, 0); }
 372 }
 373 @-moz-keyframes slideouttoright {
 374     from { -moz-transform: translate3d(0, 0, 0); }
 375     to { -moz-transform: translate3d(100%, 0, 0); }
 376 }
 377
 378 .slide.out, .slide.in {
 379         -webkit-animation-timing-function: ease-out;
 380         -webkit-animation-duration: 350ms;
 381         -moz-animation-timing-function: ease-out;
 382         -moz-animation-duration: 350ms;
 383 }
 384 .slide.out {
 385         -webkit-transform: translate3d(-100%, 0, 0);
 386         -webkit-animation-name: slideouttoleft;
 387         -moz-transform: translate3d(-100%, 0, 0);
 388         -moz-animation-name: slideouttoleft;
 389 }
 390
 391 .slide.in {
 392         -webkit-transform: translate3d(0, 0, 0);
 393         -webkit-animation-name: slideinfromright;
 394         -moz-transform: translate3d(0, 0, 0);
 395         -moz-animation-name: slideinfromright;
 396 }
 397
 398 .slide.out.reverse {
 399         -webkit-transform: translate3d(100%, 0, 0);
 400         -webkit-animation-name: slideouttoright;
 401         -moz-transform: translate3d(100%, 0, 0);
 402         -moz-animation-name: slideouttoright;
 403 }
 404
 405 .slide.in.reverse {
 406         -webkit-transform: translate3d(0, 0, 0);
 407         -webkit-animation-name: slideinfromleft;
 408         -moz-transform: translate3d(0, 0, 0);
 409         -moz-animation-name: slideinfromleft;
 410 }
 411
 412 /* slide down */
 413
 414 .slidedown.out {
 415         -webkit-animation-name: fadeout;
 416         -moz-animation-name: fadeout;
 417         -webkit-animation-duration: 100ms;
 418         -moz-animation-duration: 100ms;
 419 }
 420
 421 .slidedown.in {
 422         -webkit-transform: translate3d(0, 0, 0);
 423         -webkit-animation-name: slideinfromtop;
 424         -moz-transform: translate3d(0, 0, 0);
 425         -moz-animation-name: slideinfromtop;
 426         -webkit-animation-duration: 250ms;
 427         -moz-animation-duration: 250ms;
 428 }
 429
 430 .slidedown.in.reverse {
 431         -webkit-animation-name: fadein;
 432         -moz-animation-name: fadein;
 433         -webkit-animation-duration: 150ms;
 434         -moz-animation-duration: 150ms;
 435 }
 436
 437 .slidedown.out.reverse {
 438         -webkit-transform: translate3d(0, -100%, 0);
 439         -moz-transform: translate3d(0, -100%, 0);
 440         -webkit-animation-name: slideouttotop;
 441         -moz-animation-name: slideouttotop;
 442         -webkit-animation-duration: 200ms;
 443         -moz-animation-duration: 200ms;
 444 }
 445
 446 @-webkit-keyframes slideinfromtop {
 447     from { -webkit-transform: translate3d(0, -100%, 0); }
 448     to { -webkit-transform: translate3d(0, 0, 0); }
 449 }
 450 @-moz-keyframes slideinfromtop {
 451     from { -moz-transform: translate3d(0, -100%, 0); }
 452     to { -moz-transform: translate3d(0, 0, 0); }
 453 }
 454
 455 @-webkit-keyframes slideouttotop {
 456     from { -webkit-transform: translate3d(0, 0, 0); }
 457     to { -webkit-transform: translate3d(0, -100%, 0); }
 458 }
 459 @-moz-keyframes slideouttotop {
 460     from { -moz-transform: translate3d(0, 0, 0); }
 461     to { -moz-transform: translate3d(0, -100%, 0); }
 462 }
 463
 464 /* slide up */
 465
 466 .slideup.out {
 467         -webkit-animation-name: fadeout;
 468         -moz-animation-name: fadeout;
 469         -webkit-animation-duration: 100ms;
 470         -moz-animation-duration: 100ms;
 471 }
 472
 473 .slideup.in {
 474         -webkit-transform: translate3d(0, 0, 0);
 475         -webkit-animation-name: slideinfrombottom;
 476         -moz-transform: translate3d(0, 0, 0);
 477         -moz-animation-name: slideinfrombottom;
 478         -webkit-animation-duration: 250ms;
 479         -moz-animation-duration: 250ms;
 480 }
 481
 482 .slideup.in.reverse {
 483         -webkit-animation-name: fadein;
 484         -moz-animation-name: fadein;
 485         -webkit-animation-duration: 150ms;
 486         -moz-animation-duration: 150ms;
 487 }
 488
 489 .slideup.out.reverse {
 490         -webkit-transform: translate3d(0, 100%, 0);
 491         -moz-transform: translate3d(0, 100%, 0);
 492         -webkit-animation-name: slideouttobottom;
 493         -moz-animation-name: slideouttobottom;
 494         -webkit-animation-duration: 200ms;
 495         -moz-animation-duration: 200ms;
 496 }
 497
 498 @-webkit-keyframes slideinfrombottom {
 499     from { -webkit-transform: translate3d(0, 100%, 0); }
 500     to { -webkit-transform: translate3d(0, 0, 0); }
 501 }
 502 @-moz-keyframes slideinfrombottom {
 503     from { -moz-transform: translate3d(0, 100%, 0); }
 504     to { -moz-transform: translate3d(0, 0, 0); }
 505 }
 506
 507 @-webkit-keyframes slideouttobottom {
 508     from { -webkit-transform: translate3d(0, 0, 0); }
 509     to { -webkit-transform: translate3d(0, 100%, 0); }
 510 }
 511 @-moz-keyframes slideouttobottom {
 512     from { -moz-transform: translate3d(0, 0, 0); }
 513     to { -moz-transform: translate3d(0, 100%, 0); }
 514 }
 515
 516 /* slide up + fade */
 517
 518 .slideupfade.out {
 519         -webkit-animation-name: fadeout;
 520         -moz-animation-name: fadeout;
 521         -webkit-animation-duration: 100ms;
 522         -moz-animation-duration: 100ms;
 523 }
 524
 525 .slideupfade.in {
 526         -webkit-transform: translate3d(0, 0, 0);
 527         -webkit-animation-name: slideupfadeinfrombottom;
 528         -moz-transform: translate3d(0, 0, 0);
 529         -moz-animation-name: slideupfadeinfrombottom;
 530         -webkit-animation-duration: 250ms;
 531         -moz-animation-duration: 250ms;
 532 }
 533
 534 .slideupfade.in.reverse {
 535         -webkit-animation-name: fadein;
 536         -moz-animation-name: fadein;
 537         -webkit-animation-duration: 150ms;
 538         -moz-animation-duration: 150ms;
 539 }
 540
 541 .slideupfade.out.reverse {
 542         -webkit-transform: translate3d(0, 5%, 0);
 543         -moz-transform: translate3d(0, 5%, 0);
 544         -webkit-animation-name: slideupfadeouttobottom;
 545         -moz-animation-name: slideupfadeouttobottom;
 546         -webkit-animation-duration: 200ms;
 547         -moz-animation-duration: 200ms;
 548 }
 549
 550 @-webkit-keyframes slideupfadeinfrombottom {
 551     from {
 552                 opacity: 0;
 553                 -webkit-transform: translate3d(0, 5%, 0);
 554         }
 555     to {
 556                 opacity: 1;
 557                 -webkit-transform: translate3d(0, 0, 0);
 558         }
 559 }
 560 @-moz-keyframes slideupfadeinfrombottom {
 561     from {
 562                 opacity: 0;
 563                 -moz-transform: translate3d(0, 5%, 0);
 564         }
 565     to {
 566                 opacity: 1;
 567                 -moz-transform: translate3d(0, 0, 0);
 568         }
 569 }
 570
 571 @-webkit-keyframes slideupfadeouttobottom {
 572     from {
 573                 opacity: 1;
 574                 -webkit-transform: translate3d(0, 0, 0);
 575         }
 576     to {
 577                 opacity: 0;
 578                 -webkit-transform: translate3d(0, 5%, 0);
 579         }
 580 }
 581 @-moz-keyframes slideupfadeouttobottom {
 582     from {
 583                 opacity: 1;
 584                 -moz-transform: translate3d(0, 0, 0);
 585         }
 586     to {
 587                 opacity: 0;
 588                 -moz-transform: translate3d(0, 5%, 0);
 589         }
 590 }
 591
 592 /* slide down + fade */
 593
 594 .slidedownfade.out {
 595         -webkit-animation-name: fadeout;
 596         -moz-animation-name: fadeout;
 597         -webkit-animation-duration: 100ms;
 598         -moz-animation-duration: 100ms;
 599 }
 600
 601 .slidedownfade.in {
 602         -webkit-transform: translate3d(0, 0, 0);
 603         -webkit-animation-name: slidedownfadeinfromtop;
 604         -moz-transform: translate3d(0, 0, 0);
 605         -moz-animation-name: slidedownfadeinfromtop;
 606         -webkit-animation-duration: 250ms;
 607         -moz-animation-duration: 250ms;
 608 }
 609
 610 .slidedownfade.in.reverse {
 611         -webkit-animation-name: fadein;
 612         -moz-animation-name: fadein;
 613         -webkit-animation-duration: 150ms;
 614         -moz-animation-duration: 150ms;
 615 }
 616
 617 .slidedownfade.out.reverse {
 618         -webkit-transform: translate3d(0, -5%, 0);
 619         -moz-transform: translate3d(0, -5%, 0);
 620         -webkit-animation-name: slidedownfadeouttotop;
 621         -moz-animation-name: slidedownfadeouttotop;
 622         -webkit-animation-duration: 200ms;
 623         -moz-animation-duration: 200ms;
 624 }
 625
 626 @-webkit-keyframes slidedownfadeinfromtop {
 627     from {
 628                 opacity: 0;
 629                 -webkit-transform: translate3d(0, -5%, 0);
 630         }
 631     to {
 632                 opacity: 1;
 633                 -webkit-transform: translate3d(0, 0, 0);
 634         }
 635 }
 636 @-moz-keyframes slidedownfadeinfromtop {
 637     from {
 638                 opacity: 0;
 639                 -moz-transform: translate3d(0, -5%, 0);
 640         }
 641     to {
 642                 opacity: 1;
 643                 -moz-transform: translate3d(0, 0, 0);
 644         }
 645 }
 646
 647 @-webkit-keyframes slidedownfadeouttotop {
 648     from {
 649                 opacity: 1;
 650                 -webkit-transform: translate3d(0, 0, 0);
 651         }
 652     to {
 653                 opacity: 0;
 654                 -webkit-transform: translate3d(0, -5%, 0);
 655         }
 656 }
 657 @-moz-keyframes slidedownfadeouttotop {
 658     from {
 659                 opacity: 1;
 660                 -moz-transform: translate3d(0, 0, 0);
 661         }
 662     to {
 663                 opacity: 0;
 664                 -moz-transform: translate3d(0, -5%, 0);
 665         }
 666 }
 667
 668 /* slide fade */
 669
 670 .slidefade.out {
 671         -webkit-transform: translate3d(-100%, 0, 0);
 672         -webkit-animation-name: slideouttoleft;
 673         -moz-transform: translate3d(-100%, 0, 0);
 674         -moz-animation-name: slideouttoleft;
 675         -webkit-animation-duration: 225ms;
 676         -moz-animation-duration: 225ms;
 677 }
 678
 679 .slidefade.in {
 680         -webkit-transform: translate3d(0, 0, 0);
 681         -webkit-animation-name: fadein;
 682         -moz-transform: translate3d(0, 0, 0);
 683         -moz-animation-name: fadein;
 684         -webkit-animation-duration: 200ms;
 685         -moz-animation-duration: 200ms;
 686 }
 687
 688 .slidefade.out.reverse {
 689         -webkit-transform: translate3d(100%, 0, 0);
 690         -webkit-animation-name: slideouttoright;
 691         -moz-transform: translate3d(100%, 0, 0);
 692         -moz-animation-name: slideouttoright;
 693         -webkit-animation-duration: 200ms;
 694         -moz-animation-duration: 200ms;
 695 }
 696
 697 .slidefade.in.reverse {
 698         -webkit-transform: translate3d(0, 0, 0);
 699         -webkit-animation-name: fadein;
 700         -moz-transform: translate3d(0, 0, 0);
 701         -moz-animation-name: fadein;
 702         -webkit-animation-duration: 200ms;
 703         -moz-animation-duration: 200ms;
 704 }
 705
 706 /* The properties in this rule are only necessary for the 'flip' transition.
 707  * We need specify the perspective to create a projection matrix. This will add
 708  * some depth as the element flips. The depth number represents the distance of
 709  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 710  * value.
 711  */
 712
 713 .viewport-turn {
 714         -webkit-perspective: 1000;
 715         -moz-perspective: 1000;
 716         position: absolute;
 717 }
 718 .turn {
 719         -webkit-backface-visibility:hidden;
 720         -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. */
 721         -webkit-transform-origin: 0;
 722         -moz-backface-visibility:hidden;
 723         -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. */
 724         -moz-transform-origin: 0;
 725 }
 726
 727 .turn.out {
 728         -webkit-transform: rotateY(-90deg) scale(.9);
 729         -webkit-animation-name: flipouttoleft;
 730         -moz-transform: rotateY(-90deg) scale(.9);
 731         -moz-animation-name: flipouttoleft;
 732         -webkit-animation-duration: 125ms;
 733         -moz-animation-duration: 125ms;
 734 }
 735
 736 .turn.in {
 737         -webkit-animation-name: flipintoright;
 738         -moz-animation-name: flipintoright;
 739         -webkit-animation-duration: 250ms;
 740         -moz-animation-duration: 250ms;
 741 }
 742
 743 .turn.out.reverse {
 744         -webkit-transform: rotateY(90deg) scale(.9);
 745         -webkit-animation-name: flipouttoright;
 746         -moz-transform: rotateY(90deg) scale(.9);
 747         -moz-animation-name: flipouttoright;
 748 }
 749
 750 .turn.in.reverse {
 751         -webkit-animation-name: flipintoleft;
 752         -moz-animation-name: flipintoleft;
 753 }
 754
 755 @-webkit-keyframes flipouttoleft {
 756     from { -webkit-transform: rotateY(0); }
 757     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 758 }
 759 @-moz-keyframes flipouttoleft {
 760     from { -moz-transform: rotateY(0); }
 761     to { -moz-transform: rotateY(-90deg) scale(.9); }
 762 }
 763 @-webkit-keyframes flipouttoright {
 764     from { -webkit-transform: rotateY(0) ; }
 765     to { -webkit-transform: rotateY(90deg) scale(.9); }
 766 }
 767 @-moz-keyframes flipouttoright {
 768     from { -moz-transform: rotateY(0); }
 769     to { -moz-transform: rotateY(90deg) scale(.9); }
 770 }
 771 @-webkit-keyframes flipintoleft {
 772     from { -webkit-transform: rotateY(-90deg) scale(.9); }
 773     to { -webkit-transform: rotateY(0); }
 774 }
 775 @-moz-keyframes flipintoleft {
 776     from { -moz-transform: rotateY(-90deg) scale(.9); }
 777     to { -moz-transform: rotateY(0); }
 778 }
 779 @-webkit-keyframes flipintoright {
 780     from { -webkit-transform: rotateY(90deg) scale(.9); }
 781     to { -webkit-transform: rotateY(0); }
 782 }
 783 @-moz-keyframes flipintoright {
 784     from { -moz-transform: rotateY(90deg) scale(.9); }
 785     to { -moz-transform: rotateY(0); }
 786 }
 787
 788
 789 /* depth */
 790
 791 .depth {
 792         -webkit-transform-origin: 50% 50%;
 793         -moz-transform-origin: 50% 50%;
 794 }
 795
 796 .depth.out {
 797         -webkit-animation-name: depthout;
 798         -moz-animation-name: depthout;
 799         opacity: 0;
 800         -webkit-animation-duration: 250ms;
 801         -moz-animation-duration: 250ms;
 802         -webkit-animation-timing-function: ease;
 803         -moz-animation-timing-function: ease;
 804 }
 805
 806 .depth.in {
 807         -webkit-transform: scale(1);
 808         -moz-transform: scale(1);
 809         opacity: 1;
 810         -webkit-animation-name: depthin;
 811         -moz-animation-name: depthin;
 812         -webkit-animation-duration: 350ms;
 813         -moz-animation-duration: 350ms;
 814         -webkit-animation-timing-function: ease;
 815         -moz-animation-timing-function: ease;
 816 }
 817
 818 .depth.in.reverse {
 819         -webkit-animation-name: depthinreverse;
 820         -moz-animation-name: depthinreverse;
 821 }
 822
 823 .depth.out.reverse {
 824         -webkit-transform: scale(.9);
 825         -moz-transform: scale(.9);
 826         -webkit-animation-name: depthoutreverse;
 827         -moz-animation-name: depthoutreverse;
 828 }
 829
 830 @-webkit-keyframes depthout {
 831     from {
 832         -webkit-transform: scale(1);
 833         opacity: 1;
 834     }
 835     to {
 836         -webkit-transform: scale(1.1);
 837         opacity: 0;
 838     }
 839 }
 840
 841 @-moz-keyframes depthout {
 842     from {
 843         -moz-transform: scale(1);
 844         opacity: 1;
 845     }
 846     to {
 847         -moz-transform: scale(1.1);
 848         opacity: 0;
 849     }
 850 }
 851
 852 @-webkit-keyframes depthin {
 853     0% {
 854         -webkit-transform: scale(.9);
 855         opacity: 0;
 856     }
 857     30% {
 858         -webkit-transform: scale(.9);
 859         opacity: 0;
 860     }
 861     100% {
 862         -webkit-transform: scale(1);
 863         opacity: 1;
 864     }
 865 }
 866
 867 @-moz-keyframes depthin {
 868     0% {
 869         -moz-transform: scale(.9);
 870         opacity: 0;
 871     }
 872     30% {
 873         -moz-transform: scale(.9);
 874         opacity: 0;
 875     }
 876     100% {
 877         -moz-transform: scale(1);
 878         opacity: 1;
 879     }
 880 }
 881
 882 @-webkit-keyframes depthinreverse {
 883     0% {
 884         -webkit-transform: scale(1.1);
 885         opacity: 0;
 886     }
 887     30% {
 888         -webkit-transform: scale(1.1);
 889         opacity: 0;
 890     }
 891     100% {
 892         -webkit-transform: scale(1);
 893         opacity: 1;
 894     }
 895 }
 896
 897 @-moz-keyframes depthinreverse {
 898     0% {
 899         -moz-transform: scale(1.1);
 900         opacity: 0;
 901     }
 902     30% {
 903         -moz-transform: scale(1.1);
 904         opacity: 0;
 905     }
 906     100% {
 907         -moz-transform: scale(1);
 908         opacity: 1;
 909     }
 910 }
 911
 912 @-webkit-keyframes depthoutreverse {
 913     from {
 914         -webkit-transform: scale(1);
 915         opacity: 1;
 916     }
 917     to {
 918         -webkit-transform: scale(.9);
 919         opacity: 0;
 920     }
 921 }
 922
 923 @-moz-keyframes depthoutreverse {
 924     from {
 925         -moz-transform: scale(1);
 926         opacity: 1;
 927     }
 928     to {
 929         -moz-transform: scale(.9);
 930         opacity: 0;
 931     }
 932 }