Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-17 17:45:17 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fixed Flip in latest Chrome, FF and IE

Browse source 
Fixed the Flip gliches in Chrome, but also improved it for the latest FF
and IE

Issue #80 is solved
This commit is contained in:
George Petrov 2013-08-15 13:15:32 +02:00
parent f467a46094
commit baff813261
1 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
animate.css vendored
View file

@ -277,11 +277,11 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
}
50% {
@ -289,21 +289,21 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) scale(1);
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) rotateY(0);
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-moz-animation-timing-function: ease-out;
}
50% {
@ -311,21 +311,21 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective(400px) scale(1);
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective(400px) rotateY(0);
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-o-animation-timing-function: ease-out;
}
50% {
@ -333,21 +333,21 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective(400px) rotateY(360deg) scale(.95);
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective(400px) scale(1);
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;
}
50% {
@ -355,11 +355,11 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;
}
}