Permalink
Browse files

Added unprefixed properties to transitions CSS for IE10 support.

  • Loading branch information...
jaspermdegroot committed Nov 13, 2012
1 parent a38792c commit 17ce0a7ba2e9a49da77e36cad70422813743365b
@@ -13,14 +13,24 @@
opacity: 0;
}
.in {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.out {
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
@@ -2,28 +2,36 @@
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
animation-duration: 125ms;
animation-name: fadeout;
}
.fade.in {
@@ -32,4 +40,6 @@
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
animation-duration: 225ms;
animation-name: fadein;
}
@@ -8,13 +8,16 @@
.viewport-flip {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
position: absolute;
}
.flip {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility: hidden;
-moz-transform: translateX(0);
backface-visibility: hidden;
transform: translateX(0);
}
.flip.out {
@@ -24,25 +27,33 @@
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 225ms;
animation-name: flipintoright;
animation-duration: 225ms;
}
.flip.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
transform: rotateY(90deg) scale(.9);
animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
@@ -53,6 +64,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
from { transform: rotateY(0); }
to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
@@ -61,6 +76,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
from { transform: rotateY(0); }
to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
@@ -69,11 +88,19 @@
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@keyframes flipintoleft {
from { transform: rotateY(-90deg) scale(.9); }
to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
}
@keyframes flipintoright {
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
@@ -1,15 +1,19 @@
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
-moz-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-moz-transform-origin: 50% 30%;
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
transform-origin: 50% 30%;
box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog.flow {
-webkit-transform-origin: none;
-moz-transform-origin: none;
-webkit-box-shadow: none;
-moz-transform-origin: none;
-moz-box-shadow: none;
transform-origin: none;
box-shadow: none;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7);
@@ -20,6 +24,10 @@
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(-100%) scale(.7);
animation-name: flowouttoleft;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.in {
@@ -31,18 +39,25 @@
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
transform: translateX(0) scale(1);
animation-name: flowinfromright;
animation-timing-function: ease;
animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
transform: translateX(100%);
animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
@@ -55,6 +70,11 @@
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(-100%) scale(.7); }
}
@keyframes flowouttoleft {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.7); }
100% { transform: translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1); }
@@ -66,6 +86,11 @@
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(100%) scale(.7); }
}
@keyframes flowouttoright {
0% { transform: translateX(0) scale(1); }
60%, 70% { transform: translateX(0) scale(.7); }
100% { transform: translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7); }
@@ -77,6 +102,12 @@
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
0% { transform: translateX(-100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
@@ -86,4 +117,9 @@
0% { -moz-transform: translateX(100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
}
@keyframes flowinfromright {
0% { transform: translateX(100%) scale(.7); }
30%, 40% { transform: translateX(0) scale(.7); }
100% { transform: translateX(0) scale(1); }
}
@@ -1,36 +1,45 @@
.pop {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
opacity: 1;
-webkit-animation-name: popin;
-moz-animation-name: popin;
-webkit-animation-duration: 350ms;
-moz-transform: scale(1);
-moz-animation-name: popin;
-moz-animation-duration: 350ms;
transform: scale(1);
animation-name: popin;
animation-duration: 350ms;
opacity: 1;
}
.pop.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
opacity: 0;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
opacity: 0;
}
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-webkit-animation-name: popout;
-moz-transform: scale(.8);
-moz-animation-name: popout;
transform: scale(.8);
animation-name: popout;
}
@-webkit-keyframes popin {
@@ -43,7 +52,6 @@
opacity: 1;
}
}
@-moz-keyframes popin {
from {
-moz-transform: scale(.8);
@@ -54,6 +62,16 @@
opacity: 1;
}
}
@keyframes popin {
from {
transform: scale(.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes popout {
from {
@@ -65,7 +83,6 @@
opacity: 0;
}
}
@-moz-keyframes popout {
from {
-moz-transform: scale(1);
@@ -75,4 +92,14 @@
-moz-transform: scale(.8);
opacity: 0;
}
}
}
@keyframes popout {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(.8);
opacity: 0;
}
}
Oops, something went wrong.

0 comments on commit 17ce0a7

Please sign in to comment.