jquery-mobile/css/structure/jquery.mobile.transitions.flow.css

89 lines
2.8 KiB
CSS
Raw Permalink Normal View History

/* flow transition */
.flow {
2012-01-09 14:24:09 +00:00
-webkit-transform-origin: 50% 30%;
-moz-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog-page.flow {
-webkit-transform-origin: none;
-moz-transform-origin: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.flow.out {
2012-01-09 15:35:35 +00:00
-webkit-transform: translateX(-100%) scale(.7);
-webkit-animation-name: flowouttoleft;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(-100%) scale(.7);
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
}
.flow.in {
2012-01-09 15:35:35 +00:00
-webkit-transform: translateX(0) scale(1);
-webkit-animation-name: flowinfromright;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
2012-01-09 15:35:35 +00:00
-moz-transform: translateX(0) scale(1);
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
2012-01-09 15:35:35 +00:00
0% { -webkit-transform: translateX(0) scale(1); }
2012-01-12 14:41:54 +00:00
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
2012-01-09 15:35:35 +00:00
100% { -webkit-transform: translateX(-100%) scale(.7); }
}
@-moz-keyframes flowouttoleft {
0% { -moz-transform: translateX(0) scale(1); }
2012-01-12 14:41:54 +00:00
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
2012-01-09 15:35:35 +00:00
0% { -webkit-transform: translateX(0) scale(1); }
2012-01-12 14:41:54 +00:00
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
2012-01-09 15:35:35 +00:00
100% { -webkit-transform: translateX(100%) scale(.7); }
}
@-moz-keyframes flowouttoright {
0% { -moz-transform: translateX(0) scale(1); }
2012-01-12 14:41:54 +00:00
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
2012-01-09 15:35:35 +00:00
0% { -webkit-transform: translateX(-100%) scale(.7); }
2012-01-12 14:41:54 +00:00
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
2012-01-09 15:35:35 +00:00
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromleft {
2012-01-09 15:35:35 +00:00
0% { -moz-transform: translateX(-100%) scale(.7); }
2012-01-12 14:41:54 +00:00
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
2012-01-09 15:35:35 +00:00
0% { -webkit-transform: translateX(100%) scale(.7); }
2012-01-12 14:41:54 +00:00
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
2012-01-09 15:35:35 +00:00
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromright {
2012-01-09 15:35:35 +00:00
0% { -moz-transform: translateX(100%) scale(.7); }
2012-01-12 14:41:54 +00:00
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}