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         -webkit-animation-timing-function: ease-out;
  11         -webkit-animation-duration: 350ms;
  12         -moz-animation-timing-function: ease-out;
  13         -moz-animation-duration: 350ms;
  14 }
  15
  16 .out {
  17         -webkit-animation-timing-function: ease-in;
  18         -webkit-animation-duration: 225ms;
  19         -moz-animation-timing-function: ease-in;
  20         -moz-animation-duration: 225;
  21 }
  22
  23
  24 /* fade */
  25
  26 @-webkit-keyframes fadein {
  27     from { opacity: 0; }
  28     to { opacity: 1; }
  29 }
  30
  31 @-moz-keyframes fadein {
  32     from { opacity: 0; }
  33     to { opacity: 1; }
  34 }
  35
  36 @-webkit-keyframes fadeout {
  37     from { opacity: 1; }
  38     to { opacity: 0; }
  39 }
  40
  41 @-moz-keyframes fadeout {
  42     from { opacity: 1; }
  43     to { opacity: 0; }
  44 }
  45
  46 .fade.out {
  47         opacity: 0;
  48         -webkit-animation-duration: 125ms;
  49         -webkit-animation-name: fadeout;
  50         -moz-animation-duration: 125ms;
  51         -moz-animation-name: fadeout;
  52 }
  53
  54 .fade.in {
  55         opacity: 1;
  56         -webkit-animation-duration: 225ms;
  57         -webkit-animation-name: fadein;
  58         -moz-animation-duration: 225ms;
  59         -moz-animation-name: fadein;
  60 }
  61
  62
  63 /* flip */
  64
  65 /* The properties in this rule are only necessary for the 'flip' transition.
  66  * We need specify the perspective to create a projection matrix. This will add
  67  * some depth as the element flips. The depth number represents the distance of
  68  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
  69  * value.
  70  */
  71
  72 .viewport-flip {
  73         -webkit-perspective: 1000;
  74         -moz-perspective: 1000;
  75         position: absolute;
  76 }
  77 .flip {
  78         -webkit-backface-visibility:hidden;
  79         -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. */
  80         -moz-backface-visibility:hidden;
  81         -moz-transform:translate3d(0, 0, 0);
  82 }
  83
  84 .flip.out {
  85         -webkit-transform: rotateY(-90deg) scale(.9);
  86         -webkit-animation-name: flipouttoleft;
  87         -webkit-animation-duration: 175ms;
  88         -moz-transform: rotateY(-90deg) scale(.9);
  89         -moz-animation-name: flipouttoleft;
  90         -moz-animation-duration: 175ms;
  91 }
  92
  93 .flip.in {
  94         -webkit-animation-name: flipintoright;
  95         -webkit-animation-duration: 225ms;
  96         -moz-animation-name: flipintoright;
  97         -moz-animation-duration: 225ms;
  98 }
  99
 100 .flip.out.reverse {
 101         -webkit-transform: rotateY(90deg) scale(.9);
 102         -webkit-animation-name: flipouttoright;
 103         -moz-transform: rotateY(90deg) scale(.9);
 104         -moz-animation-name: flipouttoright;
 105 }
 106
 107 .flip.in.reverse {
 108         -webkit-animation-name: flipintoleft;
 109         -moz-animation-name: flipintoleft;
 110 }
 111
 112 @-webkit-keyframes flipouttoleft {
 113     from { -webkit-transform: rotateY(0); }
 114     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 115 }
 116 @-moz-keyframes flipouttoleft {
 117     from { -moz-transform: rotateY(0); }
 118     to { -moz-transform: rotateY(-90deg) scale(.9); }
 119 }
 120 @-webkit-keyframes flipouttoright {
 121     from { -webkit-transform: rotateY(0) ; }
 122     to { -webkit-transform: rotateY(90deg) scale(.9); }
 123 }
 124 @-moz-keyframes flipouttoright {
 125     from { -moz-transform: rotateY(0); }
 126     to { -moz-transform: rotateY(90deg) scale(.9); }
 127 }
 128 @-webkit-keyframes flipintoleft {
 129     from { -webkit-transform: rotateY(-90deg) scale(.9); }
 130     to { -webkit-transform: rotateY(0); }
 131 }
 132 @-moz-keyframes flipintoleft {
 133     from { -moz-transform: rotateY(-90deg) scale(.9); }
 134     to { -moz-transform: rotateY(0); }
 135 }
 136 @-webkit-keyframes flipintoright {
 137     from { -webkit-transform: rotateY(90deg) scale(.9); }
 138     to { -webkit-transform: rotateY(0); }
 139 }
 140 @-moz-keyframes flipintoright {
 141     from { -moz-transform: rotateY(90deg) scale(.9); }
 142     to { -moz-transform: rotateY(0); }
 143 }
 144
 145
 146 /* flow transition */
 147
 148 .flow {
 149         -webkit-transform-origin: 50% 30%;
 150         -moz-transform-origin: 50% 30%;
 151         -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
 152         -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
 153 }
 154 .ui-dialog.flow {
 155         -webkit-transform-origin: none;
 156         -moz-transform-origin: none;
 157         -webkit-box-shadow: none;
 158         -moz-box-shadow: none;
 159 }
 160 .flow.out {
 161         -webkit-transform: translate3d(-100%, 0, 0) scale(.7);
 162         -webkit-animation-name: flowouttoleft;
 163         -webkit-animation-timing-function: ease;
 164         -webkit-animation-duration: 350ms;
 165         -moz-transform: translate3d(-100%, 0, 0) scale(.7);
 166         -moz-animation-name: flowouttoleft;
 167         -moz-animation-timing-function: ease;
 168         -moz-animation-duration: 350ms;
 169 }
 170
 171 .flow.in {
 172         -webkit-transform: translate3d(0, 0, 0) scale(1);
 173         -webkit-animation-name: flowinfromright;
 174         -webkit-animation-timing-function: ease;
 175         -webkit-animation-duration: 350ms;
 176         -moz-transform: translate3d(0, 0, 0) scale(1);
 177         -moz-animation-name: flowinfromright;
 178         -moz-animation-timing-function: ease;
 179         -moz-animation-duration: 350ms;
 180 }
 181
 182 .flow.out.reverse {
 183         -webkit-transform: translate3d(100%, 0, 0);
 184         -webkit-animation-name: flowouttoright;
 185         -moz-transform: translate3d(100%, 0, 0);
 186         -moz-animation-name: flowouttoright;
 187 }
 188
 189 .flow.in.reverse {
 190         -webkit-animation-name: flowinfromleft;
 191         -moz-animation-name: flowinfromleft;
 192 }
 193
 194 @-webkit-keyframes flowouttoleft {
 195     0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 196         60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 197     100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
 198 }
 199 @-moz-keyframes flowouttoleft {
 200     0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 201         60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 202     100% { -moz-transform:  translateX(-100%) scale(.7); }
 203 }
 204
 205 @-webkit-keyframes flowouttoright {
 206     0% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 207         60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 208     100% { -webkit-transform:  translate3d(100%, 0, 0) scale(.7); }
 209 }
 210 @-moz-keyframes flowouttoright {
 211     0% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 212         60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 213     100% { -moz-transform:  translate3d(100%, 0, 0) scale(.7); }
 214 }
 215
 216 @-webkit-keyframes flowinfromleft {
 217     0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); }
 218         30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 219     100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 220 }
 221 @-moz-keyframes flowinfromleft {
 222     0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); }
 223         30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 224     100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 225 }
 226 @-webkit-keyframes flowinfromright {
 227     0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); }
 228         30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); }
 229     100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
 230 }
 231 @-moz-keyframes flowinfromright {
 232     0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); }
 233         30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); }
 234     100% { -moz-transform: translate3d(0, 0, 0) scale(1); }
 235 }
 236
 237
 238 /* pop */
 239
 240 .pop {
 241         -webkit-transform-origin: 50% 50%;
 242         -moz-transform-origin: 50% 50%;
 243 }
 244
 245 .pop.in {
 246         -webkit-transform: scale(1);
 247         -moz-transform: scale(1);
 248     opacity: 1;
 249         -webkit-animation-name: popin;
 250         -moz-animation-name: popin;
 251         -webkit-animation-duration: 350ms;
 252         -moz-animation-duration: 350ms;
 253 }
 254
 255 .pop.out {
 256         -webkit-animation-name: fadeout;
 257         -moz-animation-name: fadeout;
 258         opacity: 0;
 259         -webkit-animation-duration: 100ms;
 260         -moz-animation-duration: 100ms;
 261 }
 262
 263 .pop.in.reverse {
 264         -webkit-animation-name: fadein;
 265         -moz-animation-name: fadein;
 266 }
 267
 268 .pop.out.reverse {
 269         -webkit-transform: scale(.8);
 270         -moz-transform: scale(.8);
 271         -webkit-animation-name: popout;
 272         -moz-animation-name: popout;
 273 }
 274
 275 @-webkit-keyframes popin {
 276     from {
 277         -webkit-transform: scale(.8);
 278         opacity: 0;
 279     }
 280     to {
 281         -webkit-transform: scale(1);
 282         opacity: 1;
 283     }
 284 }
 285
 286 @-moz-keyframes popin {
 287     from {
 288         -moz-transform: scale(.8);
 289         opacity: 0;
 290     }
 291     to {
 292         -moz-transform: scale(1);
 293         opacity: 1;
 294     }
 295 }
 296
 297 @-webkit-keyframes popout {
 298     from {
 299         -webkit-transform: scale(1);
 300         opacity: 1;
 301     }
 302     to {
 303         -webkit-transform: scale(.8);
 304         opacity: 0;
 305     }
 306 }
 307
 308 @-moz-keyframes popout {
 309     from {
 310         -moz-transform: scale(1);
 311         opacity: 1;
 312     }
 313     to {
 314         -moz-transform: scale(.8);
 315         opacity: 0;
 316     }
 317 }
 318
 319
 320 /* slide */
 321
 322 /* keyframes for slidein from sides */
 323 @-webkit-keyframes slideinfromright {
 324     from { -webkit-transform: translate3d(100%, 0, 0); }
 325     to { -webkit-transform: translate3d(0, 0, 0); }
 326 }
 327 @-moz-keyframes slideinfromright {
 328     from { -moz-transform: translate3d(100%, 0, 0); }
 329     to { -moz-transform: translate3d(0, 0, 0); }
 330 }
 331
 332 @-webkit-keyframes slideinfromleft {
 333     from { -webkit-transform: translate3d(-100%, 0, 0); }
 334     to { -webkit-transform: translate3d(0, 0, 0); }
 335 }
 336 @-moz-keyframes slideinfromleft {
 337     from { -moz-transform: translate3d(-100%, 0, 0); }
 338     to { -moz-transform: translate3d(0, 0, 0); }
 339 }
 340
 341 /* keyframes for slideout to sides */
 342 @-webkit-keyframes slideouttoleft {
 343     from { -webkit-transform: translate3d(0, 0, 0); }
 344     to { -webkit-transform: translate3d(-100%, 0, 0); }
 345 }
 346 @-moz-keyframes slideouttoleft {
 347     from { -moz-transform: translate3d(0, 0, 0); }
 348     to { -moz-transform: translate3d(-100%, 0, 0); }
 349 }
 350
 351 @-webkit-keyframes slideouttoright {
 352     from { -webkit-transform: translate3d(0, 0, 0); }
 353     to { -webkit-transform: translate3d(100%, 0, 0); }
 354 }
 355 @-moz-keyframes slideouttoright {
 356     from { -moz-transform: translate3d(0, 0, 0); }
 357     to { -moz-transform: translate3d(100%, 0, 0); }
 358 }
 359
 360 .slide.out, .slide.in {
 361         -webkit-animation-timing-function: ease-out;
 362         -webkit-animation-duration: 350ms;
 363         -moz-animation-timing-function: ease-out;
 364         -moz-animation-duration: 350ms;
 365 }
 366 .slide.out {
 367         -webkit-transform: translate3d(-100%, 0, 0);
 368         -webkit-animation-name: slideouttoleft;
 369         -moz-transform: translate3d(-100%, 0, 0);
 370         -moz-animation-name: slideouttoleft;
 371 }
 372
 373 .slide.in {
 374         -webkit-transform: translate3d(0, 0, 0);
 375         -webkit-animation-name: slideinfromright;
 376         -moz-transform: translate3d(0, 0, 0);
 377         -moz-animation-name: slideinfromright;
 378 }
 379
 380 .slide.out.reverse {
 381         -webkit-transform: translate3d(100%, 0, 0);
 382         -webkit-animation-name: slideouttoright;
 383         -moz-transform: translate3d(100%, 0, 0);
 384         -moz-animation-name: slideouttoright;
 385 }
 386
 387 .slide.in.reverse {
 388         -webkit-transform: translate3d(0, 0, 0);
 389         -webkit-animation-name: slideinfromleft;
 390         -moz-transform: translate3d(0, 0, 0);
 391         -moz-animation-name: slideinfromleft;
 392 }
 393
 394 /* slide down */
 395
 396 .slidedown.out {
 397         -webkit-animation-name: fadeout;
 398         -moz-animation-name: fadeout;
 399         -webkit-animation-duration: 100ms;
 400         -moz-animation-duration: 100ms;
 401 }
 402
 403 .slidedown.in {
 404         -webkit-transform: translate3d(0, 0, 0);
 405         -webkit-animation-name: slideinfromtop;
 406         -moz-transform: translate3d(0, 0, 0);
 407         -moz-animation-name: slideinfromtop;
 408         -webkit-animation-duration: 250ms;
 409         -moz-animation-duration: 250ms;
 410 }
 411
 412 .slidedown.in.reverse {
 413         -webkit-animation-name: fadein;
 414         -moz-animation-name: fadein;
 415         -webkit-animation-duration: 150ms;
 416         -moz-animation-duration: 150ms;
 417 }
 418
 419 .slidedown.out.reverse {
 420         -webkit-transform: translate3d(0, -100%, 0);
 421         -moz-transform: translate3d(0, -100%, 0);
 422         -webkit-animation-name: slideouttotop;
 423         -moz-animation-name: slideouttotop;
 424         -webkit-animation-duration: 200ms;
 425         -moz-animation-duration: 200ms;
 426 }
 427
 428 @-webkit-keyframes slideinfromtop {
 429     from { -webkit-transform: translate3d(0, -100%, 0); }
 430     to { -webkit-transform: translate3d(0, 0, 0); }
 431 }
 432 @-moz-keyframes slideinfromtop {
 433     from { -moz-transform: translate3d(0, -100%, 0); }
 434     to { -moz-transform: translate3d(0, 0, 0); }
 435 }
 436
 437 @-webkit-keyframes slideouttotop {
 438     from { -webkit-transform: translate3d(0, 0, 0); }
 439     to { -webkit-transform: translate3d(0, -100%, 0); }
 440 }
 441 @-moz-keyframes slideouttotop {
 442     from { -moz-transform: translate3d(0, 0, 0); }
 443     to { -moz-transform: translate3d(0, -100%, 0); }
 444 }
 445
 446 /* slide up */
 447
 448 .slideup.out {
 449         -webkit-animation-name: fadeout;
 450         -moz-animation-name: fadeout;
 451         -webkit-animation-duration: 100ms;
 452         -moz-animation-duration: 100ms;
 453 }
 454
 455 .slideup.in {
 456         -webkit-transform: translate3d(0, 0, 0);
 457         -webkit-animation-name: slideinfrombottom;
 458         -moz-transform: translate3d(0, 0, 0);
 459         -moz-animation-name: slideinfrombottom;
 460         -webkit-animation-duration: 250ms;
 461         -moz-animation-duration: 250ms;
 462 }
 463
 464 .slideup.in.reverse {
 465         -webkit-animation-name: fadein;
 466         -moz-animation-name: fadein;
 467         -webkit-animation-duration: 150ms;
 468         -moz-animation-duration: 150ms;
 469 }
 470
 471 .slideup.out.reverse {
 472         -webkit-transform: translate3d(0, 100%, 0);
 473         -moz-transform: translate3d(0, 100%, 0);
 474         -webkit-animation-name: slideouttobottom;
 475         -moz-animation-name: slideouttobottom;
 476         -webkit-animation-duration: 200ms;
 477         -moz-animation-duration: 200ms;
 478 }
 479
 480 @-webkit-keyframes slideinfrombottom {
 481     from { -webkit-transform: translate3d(0, 100%, 0); }
 482     to { -webkit-transform: translate3d(0, 0, 0); }
 483 }
 484 @-moz-keyframes slideinfrombottom {
 485     from { -moz-transform: translate3d(0, 100%, 0); }
 486     to { -moz-transform: translate3d(0, 0, 0); }
 487 }
 488
 489 @-webkit-keyframes slideouttobottom {
 490     from { -webkit-transform: translate3d(0, 0, 0); }
 491     to { -webkit-transform: translate3d(0, 100%, 0); }
 492 }
 493 @-moz-keyframes slideouttobottom {
 494     from { -moz-transform: translate3d(0, 0, 0); }
 495     to { -moz-transform: translate3d(0, 100%, 0); }
 496 }
 497
 498 /* slide fade */
 499
 500 .slidefade.out {
 501         -webkit-transform: translate3d(-100%, 0, 0);
 502         -webkit-animation-name: slideouttoleft;
 503         -moz-transform: translate3d(-100%, 0, 0);
 504         -moz-animation-name: slideouttoleft;
 505         -webkit-animation-duration: 225ms;
 506         -moz-animation-duration: 225ms;
 507 }
 508
 509 .slidefade.in {
 510         -webkit-transform: translate3d(0, 0, 0);
 511         -webkit-animation-name: fadein;
 512         -moz-transform: translate3d(0, 0, 0);
 513         -moz-animation-name: fadein;
 514         -webkit-animation-duration: 200ms;
 515         -moz-animation-duration: 200ms;
 516 }
 517
 518 .slidefade.out.reverse {
 519         -webkit-transform: translate3d(100%, 0, 0);
 520         -webkit-animation-name: slideouttoright;
 521         -moz-transform: translate3d(100%, 0, 0);
 522         -moz-animation-name: slideouttoright;
 523         -webkit-animation-duration: 200ms;
 524         -moz-animation-duration: 200ms;
 525 }
 526
 527 .slidefade.in.reverse {
 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 /* The properties in this rule are only necessary for the 'flip' transition.
 537  * We need specify the perspective to create a projection matrix. This will add
 538  * some depth as the element flips. The depth number represents the distance of
 539  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 540  * value.
 541  */
 542
 543 .viewport-turn {
 544         -webkit-perspective: 1000;
 545         -moz-perspective: 1000;
 546         position: absolute;
 547 }
 548 .turn {
 549         -webkit-backface-visibility:hidden;
 550         -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. */
 551         -webkit-transform-origin: 0;
 552         -moz-backface-visibility:hidden;
 553         -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. */
 554         -moz-transform-origin: 0;
 555 }
 556
 557 .turn.out {
 558         -webkit-transform: rotateY(-90deg) scale(.9);
 559         -webkit-animation-name: flipouttoleft;
 560         -moz-transform: rotateY(-90deg) scale(.9);
 561         -moz-animation-name: flipouttoleft;
 562         -webkit-animation-duration: 125ms;
 563         -moz-animation-duration: 125ms;
 564 }
 565
 566 .turn.in {
 567         -webkit-animation-name: flipintoright;
 568         -moz-animation-name: flipintoright;
 569         -webkit-animation-duration: 250ms;
 570         -moz-animation-duration: 250ms;
 571 }
 572
 573 .turn.out.reverse {
 574         -webkit-transform: rotateY(90deg) scale(.9);
 575         -webkit-animation-name: flipouttoright;
 576         -moz-transform: rotateY(90deg) scale(.9);
 577         -moz-animation-name: flipouttoright;
 578 }
 579
 580 .turn.in.reverse {
 581         -webkit-animation-name: flipintoleft;
 582         -moz-animation-name: flipintoleft;
 583 }
 584
 585 @-webkit-keyframes flipouttoleft {
 586     from { -webkit-transform: rotateY(0); }
 587     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 588 }
 589 @-moz-keyframes flipouttoleft {
 590     from { -moz-transform: rotateY(0); }
 591     to { -moz-transform: rotateY(-90deg) scale(.9); }
 592 }
 593 @-webkit-keyframes flipouttoright {
 594     from { -webkit-transform: rotateY(0) ; }
 595     to { -webkit-transform: rotateY(90deg) scale(.9); }
 596 }
 597 @-moz-keyframes flipouttoright {
 598     from { -moz-transform: rotateY(0); }
 599     to { -moz-transform: rotateY(90deg) scale(.9); }
 600 }
 601 @-webkit-keyframes flipintoleft {
 602     from { -webkit-transform: rotateY(-90deg) scale(.9); }
 603     to { -webkit-transform: rotateY(0); }
 604 }
 605 @-moz-keyframes flipintoleft {
 606     from { -moz-transform: rotateY(-90deg) scale(.9); }
 607     to { -moz-transform: rotateY(0); }
 608 }
 609 @-webkit-keyframes flipintoright {
 610     from { -webkit-transform: rotateY(90deg) scale(.9); }
 611     to { -webkit-transform: rotateY(0); }
 612 }
 613 @-moz-keyframes flipintoright {
 614     from { -moz-transform: rotateY(90deg) scale(.9); }
 615     to { -moz-transform: rotateY(0); }
 616 }