mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-19 22:00:59 +00:00
7dcce519f7
I had to create a new set of basic keyframes for non-3D because we had opacity baked into our keyframes. As an upside, I could tweak the scale factor differently between Android (0 > 1) and 3D (0.8 > 1).
122 lines
2.2 KiB
CSS
122 lines
2.2 KiB
CSS
.pop {
|
|
-webkit-transform-origin: 50% 50%;
|
|
-moz-transform-origin: 50% 50%;
|
|
}
|
|
|
|
.pop.in {
|
|
-webkit-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
opacity: 1;
|
|
-webkit-animation-name: popin;
|
|
-moz-animation-name: popin;
|
|
z-index: 10;
|
|
}
|
|
|
|
.pop.out {
|
|
z-index: 0;
|
|
-webkit-animation-name: fadeout;
|
|
-moz-animation-name: fadeout;
|
|
}
|
|
|
|
.pop.in.reverse {
|
|
z-index: 0;
|
|
-webkit-animation-name: fadein;
|
|
-moz-animation-name: fadein;
|
|
}
|
|
|
|
.pop.out.reverse {
|
|
-webkit-transform: scale(.8);
|
|
-moz-transform: scale(.8);
|
|
opacity: 0;
|
|
-webkit-animation-name: popout;
|
|
-moz-animation-name: popout;
|
|
z-index: 10;
|
|
}
|
|
|
|
@-webkit-keyframes popin {
|
|
from {
|
|
-webkit-transform: scale(.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes popin {
|
|
from {
|
|
-moz-transform: scale(.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
-moz-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes popout {
|
|
from {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
-webkit-transform: scale(.8);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes popout {
|
|
from {
|
|
-moz-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
-moz-transform: scale(.8);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* for non-3d supporting browsers, remove the fade and just animate size */
|
|
|
|
.ui-unsupported-csstransform3d .pop.out,
|
|
.ui-unsupported-csstransform3d .pop.in.reverse {
|
|
z-index: 0;
|
|
opacity: 0;
|
|
-webkit-animation-duration: 200ms;
|
|
-webkit-animation-name: nofade;
|
|
}
|
|
|
|
.ui-unsupported-csstransform3d .pop.in {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
-webkit-animation-name: popin-basic;
|
|
-webkit-animation-duration: 325ms;
|
|
z-index: 10;
|
|
}
|
|
.ui-unsupported-csstransform3d .pop.out.reverse {
|
|
-webkit-transform: scale(0);
|
|
opacity: 1;
|
|
-webkit-animation-name: popout-basic;
|
|
-webkit-animation-duration: 325ms;
|
|
z-index: 10;
|
|
}
|
|
|
|
@-webkit-keyframes popin-basic {
|
|
from {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
to {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes popout-basic {
|
|
from {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
to {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
}
|
|
|