All geek questions in one place

CSS Transform - sync issue in Firefox

I made some CSS animations, and it works fine in WebKit (Safari / Chrome), but time is ruined in Firefox.

JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/

the code:

var open = false; var intransition = false; function openCard() { intransition = true; $('.out').addClass('openingOut'); $('.in-left').addClass('openingIn'); setTimeout(function() { $('.out').css("z-index", "2"); $('.in-left').css("z-index", "3"); }, 850); setTimeout(function(){ $('.out').removeClass('openingOut').addClass('outOpen'); $('.in-left').removeClass('openingIn').addClass('inOpen'); open = true; intransition = false; }, 3000); } function closeCard() { intransition = true; $('.out').addClass('closingOut'); $('.in-left').addClass('closingIn'); setTimeout(function() { $('.out').css("z-index", "3"); $('.in-left').css("z-index", "2"); }, 1000); setTimeout(function(){ $('.out').removeClass('closingOut').removeClass('outOpen'); $('.in-left').removeClass('closingIn').removeClass('inOpen'); open = false; intransition = false; }, 3000); } function toggleCard() { if (intransition) { return; } if (open) { closeCard(); } else { openCard(); } } 
 body { margin-left: 350px; } .tile { position:absolute; width:350px; height:400px; left: 50%; margin: 0 auto; background: pink; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .out { z-index: 3; } .in-left { z-index: 2; left: -350px; -webkit-transform: rotateY(-180deg); -webkit-transform-origin: 100% 100%; -moz-transform: rotateY(-180deg); -moz-transform-origin: 100% 100%; } .in-right { z-index: -1; } .content { border: 3px black double; margin: 10px; padding: 20px; height: 335px; } .perspective { -webkit-perspective: 1200px; -moz-perspective: 1200px; position: relative; display: inline-block; } /***************************************** * Open ******************************************/ .openingOut { /* Webkit */ -webkit-animation-name: open-card-out; -webkit-animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-transition-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; /* Firefox */ -moz-animation-name: open-card-out; -moz-animation-timing-function: ease; -moz-animation-duration: 3s; -moz-transition-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-direction: alternate; } .openingIn { /* Webkit */ -webkit-animation-name: open-card-in; -webkit-animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-transition-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; /* Firefox */ -moz-animation-name: open-card-in; -moz-animation-timing-function: ease; -moz-animation-duration: 3s; -moz-transition-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-direction: alternate; } .outOpen { -webkit-transform: rotateY(180deg); -webkit-transform-origin: 0 0; -moz-transform: rotateY(180deg); -moz-transform-origin: 0 0; } .inOpen { -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0 0; -moz-transform: rotateY(0deg); -moz-transform-origin: 0 0; } /* Webkit */ @-webkit-keyframes open-card-out { from { -webkit-transform-origin: left 0%; -webkit-transform: rotateY(0deg); } to { -webkit-transform-origin: left 0%; -webkit-transform: rotateY(-180deg); } } @-webkit-keyframes open-card-in { from { -webkit-transform-origin: right 0%; -webkit-transform: rotateY(180deg); } to { -webkit-transform-origin: right 0%; -webkit-transform: rotateY(0deg); } } /* Firefox */ @-moz-keyframes open-card-out { from { -moz-transform-origin: left 0%; -moz-transform: rotateY(0deg); } to { -moz-transform-origin: left 0%; -moz-transform: rotateY(-180deg); } } @-moz-keyframes open-card-in { from { -moz-transform-origin: right 0%; -moz-transform: rotateY(180deg); } to { -moz-transform-origin: right 0%; -moz-transform: rotateY(0deg); } } /***************************************** * Close ******************************************/ .closingOut { /* Webkit */ -webkit-animation-name: close-card-in; -webkit-animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-transition-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; /* Firefox */ -moz-animation-name: close-card-in; -moz-animation-timing-function: ease; -moz-animation-duration: 3s; -moz-transition-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-direction: alternate; } .closingIn { /* Webkit */ -webkit-animation-name: close-card-out; -webkit-animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-transition-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; /* Firefox */ -moz-animation-name: close-card-out; -moz-animation-timing-function: ease; -moz-animation-duration: 3s; -moz-transition-delay: 0s; -moz-animation-iteration-count: 1; -moz-animation-direction: alternate; } @-webkit-keyframes close-card-in { from { -webkit-transform: rotateY(-180deg); -webkit-transform-origin: 0% 0%; } to { -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0%; } } @-webkit-keyframes close-card-out { from { -webkit-transform-origin: right 0%; -webkit-transform: rotateY(0deg); } to { -webkit-transform-origin: right 0%; -webkit-transform: rotateY(180deg); } } @-moz-keyframes close-card-in { from { -moz-transform: rotateY(-180deg); -moz-transform-origin: 0% 0%; } to { -moz-transform: rotateY(0deg); -moz-transform-origin: 0% 0%; } } @-moz-keyframes close-card-out { from { -moz-transform-origin: right 0%; -moz-transform: rotateY(0deg); } to { -moz-transform-origin: right 0%; -moz-transform: rotateY(180deg); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="perspective" onclick="toggleCard();"> <div class="tile out out"> <div class="content"> <p>out</p> </div> </div> <div class="tile in-left"> <div class="content"> <p>in-left</p> </div> </div> <div class="tile in-right"> <div class="content"> <div style="display: table; height: 100%; width: 100%;"> <p>in-right</p> </div> </div> </div> </div>

As you can see, the div on the left side opens simultaneously with the output of the div if you use Safari / Chrome, but in Firefox it will open at different times, spoiling the entire animation.

How can i fix this?

+4
source share
2 answers

The answer is not needed , because the animation effects are the same in both browsers, stable builds are checked.

Chrome:

 19.0.1084.56 (Official Build 140965) m


Firefox:

 Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0

How ironic this answer is not responding.

To make sure, clear your browser’s cache and test it on another PC for verification.

+5
source

I agree with arttronics, I saw that you are testing all available css3 solutions, but I think there are only 2 possible solutions without using css3 at all

  • just wait until firefox improves its performance with animation and css3 transition, I personally think it won't take so long
  • To use an alternative to create an animation like canvas, I think it will not be easy, but I think this is an acceptable solution only if you really need an animation that works
0
source

Source: https://habr.com/ru/post/1416123/

More articles:


All Articles