mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
85 lines
No EOL
4.6 KiB
CSS
85 lines
No EOL
4.6 KiB
CSS
/* flow transition */
|
|
.flow {
|
|
-webkit-transform-origin: 30% 30%;
|
|
-moz-transform-origin: 30% 30%;
|
|
}
|
|
.flow.out {
|
|
-webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
|
|
-webkit-animation-name: flowouttoleft;
|
|
-webkit-animation-timing-function: ease;
|
|
-moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
|
|
-moz-animation-name: flowouttoleft;
|
|
-moz-animation-timing-function: ease;
|
|
}
|
|
|
|
.flow.in {
|
|
-webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
|
|
-webkit-animation-name: flowinfromright;
|
|
-webkit-animation-timing-function: ease;
|
|
-moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
|
|
-moz-animation-name: flowinfromright;
|
|
-moz-animation-timing-function: ease;
|
|
}
|
|
|
|
.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 {
|
|
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
}
|
|
@-moz-keyframes flowouttoleft {
|
|
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
}
|
|
|
|
@-webkit-keyframes flowouttoright {
|
|
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
}
|
|
@-moz-keyframes flowouttoright {
|
|
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
}
|
|
|
|
@-webkit-keyframes flowinfromleft {
|
|
0% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
}
|
|
@-moz-keyframes flowinfromleft {
|
|
0% { -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
}
|
|
@-webkit-keyframes flowinfromright {
|
|
0% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
|
|
}
|
|
@-moz-keyframes flowinfromright {
|
|
0% { -moz-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
|
|
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0); }
|
|
} |