jquery-mobile/css/structure/jquery.mobile.transitions.pop.css
2012-01-13 17:27:52 +07:00

110 lines
No EOL
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;
}
.pop.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
opacity: 0;
}
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-webkit-animation-name: popout;
-moz-animation-name: popout;
}
@-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 {
-webkit-animation-duration: 200ms;
-webkit-animation-name: nofade;
}
.ui-unsupported-csstransform3d .pop.in {
-webkit-animation-name: popin-basic;
-webkit-animation-duration: 325ms;
}
.ui-unsupported-csstransform3d .pop.out.reverse {
-webkit-transform: scale(0);
-webkit-animation-name: popout-basic;
-webkit-animation-duration: 325ms;
}
@-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);
}
}