Skip to content

Commit baff813

Browse files
committed
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 animate-css#80 is solved
1 parent f467a46 commit baff813

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

animate.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -277,89 +277,89 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
277277
}
278278
@-webkit-keyframes flip {
279279
0% {
280-
-webkit-transform: perspective(400px) rotateY(0);
280+
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
281281
-webkit-animation-timing-function: ease-out;
282282
}
283283
40% {
284-
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
284+
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
285285
-webkit-animation-timing-function: ease-out;
286286
}
287287
50% {
288288
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
289289
-webkit-animation-timing-function: ease-in;
290290
}
291291
80% {
292-
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
292+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
293293
-webkit-animation-timing-function: ease-in;
294294
}
295295
100% {
296-
-webkit-transform: perspective(400px) scale(1);
296+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
297297
-webkit-animation-timing-function: ease-in;
298298
}
299299
}
300300
@-moz-keyframes flip {
301301
0% {
302-
-moz-transform: perspective(400px) rotateY(0);
302+
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
303303
-moz-animation-timing-function: ease-out;
304304
}
305305
40% {
306-
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
306+
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
307307
-moz-animation-timing-function: ease-out;
308308
}
309309
50% {
310310
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
311311
-moz-animation-timing-function: ease-in;
312312
}
313313
80% {
314-
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
314+
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
315315
-moz-animation-timing-function: ease-in;
316316
}
317317
100% {
318-
-moz-transform: perspective(400px) scale(1);
318+
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
319319
-moz-animation-timing-function: ease-in;
320320
}
321321
}
322322
@-o-keyframes flip {
323323
0% {
324-
-o-transform: perspective(400px) rotateY(0);
324+
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
325325
-o-animation-timing-function: ease-out;
326326
}
327327
40% {
328-
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
328+
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
329329
-o-animation-timing-function: ease-out;
330330
}
331331
50% {
332332
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
333333
-o-animation-timing-function: ease-in;
334334
}
335335
80% {
336-
-o-transform: perspective(400px) rotateY(360deg) scale(.95);
336+
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
337337
-o-animation-timing-function: ease-in;
338338
}
339339
100% {
340-
-o-transform: perspective(400px) scale(1);
340+
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
341341
-o-animation-timing-function: ease-in;
342342
}
343343
}
344344
@keyframes flip {
345345
0% {
346-
transform: perspective(400px) rotateY(0);
346+
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
347347
animation-timing-function: ease-out;
348348
}
349349
40% {
350-
transform: perspective(400px) translateZ(150px) rotateY(170deg);
350+
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
351351
animation-timing-function: ease-out;
352352
}
353353
50% {
354354
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
355355
animation-timing-function: ease-in;
356356
}
357357
80% {
358-
transform: perspective(400px) rotateY(360deg) scale(.95);
358+
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
359359
animation-timing-function: ease-in;
360360
}
361361
100% {
362-
transform: perspective(400px) scale(1);
362+
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
363363
animation-timing-function: ease-in;
364364
}
365365
}

0 commit comments

Comments
 (0)