libs/js/jquery-mobile-1.1.0/css/structure/jquery.mobile.transition.flow.css

   1 /* flow transition */
   2 .flow {
   3         -webkit-transform-origin: 50% 30%;
   4         -moz-transform-origin: 50% 30%;
   5         -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
   6         -moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
   7 }
   8 .ui-dialog.flow {
   9         -webkit-transform-origin: none;
  10         -moz-transform-origin: none;
  11         -webkit-box-shadow: none;
  12         -moz-box-shadow: none;
  13 }
  14 .flow.out {
  15         -webkit-transform: translateX(-100%) scale(.7);
  16         -webkit-animation-name: flowouttoleft;
  17         -webkit-animation-timing-function: ease;
  18         -webkit-animation-duration: 350ms;
  19         -moz-transform: translateX(-100%) scale(.7);
  20         -moz-animation-name: flowouttoleft;
  21         -moz-animation-timing-function: ease;
  22         -moz-animation-duration: 350ms;
  23 }
  24
  25 .flow.in {
  26         -webkit-transform: translateX(0) scale(1);
  27         -webkit-animation-name: flowinfromright;
  28         -webkit-animation-timing-function: ease;
  29         -webkit-animation-duration: 350ms;
  30         -moz-transform: translateX(0) scale(1);
  31         -moz-animation-name: flowinfromright;
  32         -moz-animation-timing-function: ease;
  33         -moz-animation-duration: 350ms;
  34 }
  35
  36 .flow.out.reverse {
  37         -webkit-transform: translateX(100%);
  38         -webkit-animation-name: flowouttoright;
  39         -moz-transform: translateX(100%);
  40         -moz-animation-name: flowouttoright;
  41 }
  42
  43 .flow.in.reverse {
  44         -webkit-animation-name: flowinfromleft;
  45         -moz-animation-name: flowinfromleft;
  46 }
  47
  48 @-webkit-keyframes flowouttoleft {
  49     0% { -webkit-transform: translateX(0) scale(1); }
  50         60%, 70% { -webkit-transform: translateX(0) scale(.7); }
  51     100% { -webkit-transform: translateX(-100%) scale(.7); }
  52 }
  53 @-moz-keyframes flowouttoleft {
  54     0% { -moz-transform: translateX(0) scale(1); }
  55         60%, 70% { -moz-transform: translateX(0) scale(.7); }
  56     100% { -moz-transform:  translateX(-100%) scale(.7); }
  57 }
  58
  59 @-webkit-keyframes flowouttoright {
  60     0% { -webkit-transform: translateX(0) scale(1); }
  61         60%, 70% { -webkit-transform: translateX(0) scale(.7); }
  62     100% { -webkit-transform:  translateX(100%) scale(.7); }
  63 }
  64 @-moz-keyframes flowouttoright {
  65     0% { -moz-transform: translateX(0) scale(1); }
  66         60%, 70% { -moz-transform: translateX(0) scale(.7); }
  67     100% { -moz-transform:  translateX(100%) scale(.7); }
  68 }
  69
  70 @-webkit-keyframes flowinfromleft {
  71     0% { -webkit-transform: translateX(-100%) scale(.7); }
  72         30%, 40% { -webkit-transform: translateX(0) scale(.7); }
  73     100% { -webkit-transform: translateX(0) scale(1); }
  74 }
  75 @-moz-keyframes flowinfromleft {
  76     0% { -moz-transform: translateX(-100%) scale(.7); }
  77         30%, 40% { -moz-transform: translateX(0) scale(.7); }
  78     100% { -moz-transform: translateX(0) scale(1); }
  79 }
  80 @-webkit-keyframes flowinfromright {
  81     0% { -webkit-transform: translateX(100%) scale(.7); }
  82         30%, 40% { -webkit-transform: translateX(0) scale(.7); }
  83     100% { -webkit-transform: translateX(0) scale(1); }
  84 }
  85 @-moz-keyframes flowinfromright {
  86     0% { -moz-transform: translateX(100%) scale(.7); }
  87         30%, 40% { -moz-transform: translateX(0) scale(.7); }
  88     100% { -moz-transform: translateX(0) scale(1); }
  89 }