From baff813261ce030b96d6e689c6ddee1fd585de9d Mon Sep 17 00:00:00 2001
From: George Petrov <george@dmxzone.com>
Date: Thu, 15 Aug 2013 13:15:32 +0200
Subject: [PATCH] Fixed Flip in latest Chrome, FF and IE

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

Issue #80 is solved
---
 animate.css | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/animate.css b/animate.css
index 0f8f340..ee6e97e 100644
--- a/animate.css
+++ b/animate.css
@@ -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;
 	}
 }