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 fade */
 517
 518 .slidefade.out {
 519         -webkit-transform: translate3d(-100%, 0, 0);
 520         -webkit-animation-name: slideouttoleft;
 521         -moz-transform: translate3d(-100%, 0, 0);
 522         -moz-animation-name: slideouttoleft;
 523         -webkit-animation-duration: 225ms;
 524         -moz-animation-duration: 225ms;
 525 }
 526
 527 .slidefade.in {
 528         -webkit-transform: translate3d(0, 0, 0);
 529         -webkit-animation-name: fadein;
 530         -moz-transform: translate3d(0, 0, 0);
 531         -moz-animation-name: fadein;
 532         -webkit-animation-duration: 200ms;
 533         -moz-animation-duration: 200ms;
 534 }
 535
 536 .slidefade.out.reverse {
 537         -webkit-transform: translate3d(100%, 0, 0);
 538         -webkit-animation-name: slideouttoright;
 539         -moz-transform: translate3d(100%, 0, 0);
 540         -moz-animation-name: slideouttoright;
 541         -webkit-animation-duration: 200ms;
 542         -moz-animation-duration: 200ms;
 543 }
 544
 545 .slidefade.in.reverse {
 546         -webkit-transform: translate3d(0, 0, 0);
 547         -webkit-animation-name: fadein;
 548         -moz-transform: translate3d(0, 0, 0);
 549         -moz-animation-name: fadein;
 550         -webkit-animation-duration: 200ms;
 551         -moz-animation-duration: 200ms;
 552 }
 553
 554 /* The properties in this rule are only necessary for the 'flip' transition.
 555  * We need specify the perspective to create a projection matrix. This will add
 556  * some depth as the element flips. The depth number represents the distance of
 557  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 558  * value.
 559  */
 560
 561 .viewport-turn {
 562         -webkit-perspective: 1000;
 563         -moz-perspective: 1000;
 564         position: absolute;
 565 }
 566 .turn {
 567         -webkit-backface-visibility:hidden;
 568         -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. */
 569         -webkit-transform-origin: 0;
 570         -moz-backface-visibility:hidden;
 571         -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. */
 572         -moz-transform-origin: 0;
 573 }
 574
 575 .turn.out {
 576         -webkit-transform: rotateY(-90deg) scale(.9);
 577         -webkit-animation-name: flipouttoleft;
 578         -moz-transform: rotateY(-90deg) scale(.9);
 579         -moz-animation-name: flipouttoleft;
 580         -webkit-animation-duration: 125ms;
 581         -moz-animation-duration: 125ms;
 582 }
 583
 584 .turn.in {
 585         -webkit-animation-name: flipintoright;
 586         -moz-animation-name: flipintoright;
 587         -webkit-animation-duration: 250ms;
 588         -moz-animation-duration: 250ms;
 589 }
 590
 591 .turn.out.reverse {
 592         -webkit-transform: rotateY(90deg) scale(.9);
 593         -webkit-animation-name: flipouttoright;
 594         -moz-transform: rotateY(90deg) scale(.9);
 595         -moz-animation-name: flipouttoright;
 596 }
 597
 598 .turn.in.reverse {
 599         -webkit-animation-name: flipintoleft;
 600         -moz-animation-name: flipintoleft;
 601 }
 602
 603 @-webkit-keyframes flipouttoleft {
 604     from { -webkit-transform: rotateY(0); }
 605     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 606 }
 607 @-moz-keyframes flipouttoleft {
 608     from { -moz-transform: rotateY(0); }
 609     to { -moz-transform: rotateY(-90deg) scale(.9); }
 610 }
 611 @-webkit-keyframes flipouttoright {
 612     from { -webkit-transform: rotateY(0) ; }
 613     to { -webkit-transform: rotateY(90deg) scale(.9); }
 614 }
 615 @-moz-keyframes flipouttoright {
 616     from { -moz-transform: rotateY(0); }
 617     to { -moz-transform: rotateY(90deg) scale(.9); }
 618 }
 619 @-webkit-keyframes flipintoleft {
 620     from { -webkit-transform: rotateY(-90deg) scale(.9); }
 621     to { -webkit-transform: rotateY(0); }
 622 }
 623 @-moz-keyframes flipintoleft {
 624     from { -moz-transform: rotateY(-90deg) scale(.9); }
 625     to { -moz-transform: rotateY(0); }
 626 }
 627 @-webkit-keyframes flipintoright {
 628     from { -webkit-transform: rotateY(90deg) scale(.9); }
 629     to { -webkit-transform: rotateY(0); }
 630 }
 631 @-moz-keyframes flipintoright {
 632     from { -moz-transform: rotateY(90deg) scale(.9); }
 633     to { -moz-transform: rotateY(0); }
 634 }
 635
 636
 637 /* depth */
 638
 639 .depth {
 640         -webkit-transform-origin: 50% 50%;
 641         -moz-transform-origin: 50% 50%;
 642 }
 643
 644 .depth.out {
 645         -webkit-animation-name: depthout;
 646         -moz-animation-name: depthout;
 647         opacity: 0;
 648         -webkit-animation-duration: 250ms;
 649         -moz-animation-duration: 250ms;
 650         -webkit-animation-timing-function: ease;
 651         -moz-animation-timing-function: ease;
 652 }
 653
 654 .depth.in {
 655         -webkit-transform: scale(1);
 656         -moz-transform: scale(1);
 657         opacity: 1;
 658         -webkit-animation-name: depthin;
 659         -moz-animation-name: depthin;
 660         -webkit-animation-duration: 350ms;
 661         -moz-animation-duration: 350ms;
 662         -webkit-animation-timing-function: ease;
 663         -moz-animation-timing-function: ease;
 664 }
 665
 666 .depth.in.reverse {
 667         -webkit-animation-name: depthinreverse;
 668         -moz-animation-name: depthinreverse;
 669 }
 670
 671 .depth.out.reverse {
 672         -webkit-transform: scale(.9);
 673         -moz-transform: scale(.9);
 674         -webkit-animation-name: depthoutreverse;
 675         -moz-animation-name: depthoutreverse;
 676 }
 677
 678 @-webkit-keyframes depthout {
 679     from {
 680         -webkit-transform: scale(1);
 681         opacity: 1;
 682     }
 683     to {
 684         -webkit-transform: scale(1.1);
 685         opacity: 0;
 686     }
 687 }
 688
 689 @-moz-keyframes depthout {
 690     from {
 691         -moz-transform: scale(1);
 692         opacity: 1;
 693     }
 694     to {
 695         -moz-transform: scale(1.1);
 696         opacity: 0;
 697     }
 698 }
 699
 700 @-webkit-keyframes depthin {
 701     0% {
 702         -webkit-transform: scale(.9);
 703         opacity: 0;
 704     }
 705     30% {
 706         -webkit-transform: scale(.9);
 707         opacity: 0;
 708     }
 709     100% {
 710         -webkit-transform: scale(1);
 711         opacity: 1;
 712     }
 713 }
 714
 715 @-moz-keyframes depthin {
 716     0% {
 717         -moz-transform: scale(.9);
 718         opacity: 0;
 719     }
 720     30% {
 721         -moz-transform: scale(.9);
 722         opacity: 0;
 723     }
 724     100% {
 725         -moz-transform: scale(1);
 726         opacity: 1;
 727     }
 728 }
 729
 730 @-webkit-keyframes depthinreverse {
 731     0% {
 732         -webkit-transform: scale(1.1);
 733         opacity: 0;
 734     }
 735     30% {
 736         -webkit-transform: scale(1.1);
 737         opacity: 0;
 738     }
 739     100% {
 740         -webkit-transform: scale(1);
 741         opacity: 1;
 742     }
 743 }
 744
 745 @-moz-keyframes depthinreverse {
 746     0% {
 747         -moz-transform: scale(1.1);
 748         opacity: 0;
 749     }
 750     30% {
 751         -moz-transform: scale(1.1);
 752         opacity: 0;
 753     }
 754     100% {
 755         -moz-transform: scale(1);
 756         opacity: 1;
 757     }
 758 }
 759
 760 @-webkit-keyframes depthoutreverse {
 761     from {
 762         -webkit-transform: scale(1);
 763         opacity: 1;
 764     }
 765     to {
 766         -webkit-transform: scale(.9);
 767         opacity: 0;
 768     }
 769 }
 770
 771 @-moz-keyframes depthoutreverse {
 772     from {
 773         -moz-transform: scale(1);
 774         opacity: 1;
 775     }
 776     to {
 777         -moz-transform: scale(.9);
 778         opacity: 0;
 779     }
 780 }