CSS Transform - Timing issue on Firefox -

-

i made css animations, , on webkit (safari/chrome), works fine, on firefox timing messed up.

jsfiddle: http://jsfiddle.net/jmorais/p5xcd/1/

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 {    {      -webkit-transform-origin: left 0%;      -webkit-transform: rotatey(0deg);    }    {      -webkit-transform-origin: left 0%;      -webkit-transform: rotatey(-180deg);    }  }      @-webkit-keyframes open-card-in {    {      -webkit-transform-origin: right 0%;      -webkit-transform: rotatey(180deg);    }    {      -webkit-transform-origin: right 0%;      -webkit-transform: rotatey(0deg);    }  }    /* firefox */  @-moz-keyframes open-card-out {    {      -moz-transform-origin: left 0%;      -moz-transform: rotatey(0deg);    }    {      -moz-transform-origin: left 0%;      -moz-transform: rotatey(-180deg);    }  }      @-moz-keyframes open-card-in {    {      -moz-transform-origin: right 0%;      -moz-transform: rotatey(180deg);    }    {      -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 {    {      -webkit-transform: rotatey(-180deg);      -webkit-transform-origin: 0% 0%;    }    {      -webkit-transform: rotatey(0deg);      -webkit-transform-origin: 0% 0%;    }  }    @-webkit-keyframes close-card-out {    {      -webkit-transform-origin: right 0%;      -webkit-transform: rotatey(0deg);    }    {      -webkit-transform-origin: right 0%;      -webkit-transform: rotatey(180deg);    }  }    @-moz-keyframes close-card-in {    {      -moz-transform: rotatey(-180deg);      -moz-transform-origin: 0% 0%;    }    {      -moz-transform: rotatey(0deg);      -moz-transform-origin: 0% 0%;    }  }    @-moz-keyframes close-card-out {    {      -moz-transform-origin: right 0%;      -moz-transform: rotatey(0deg);    }    {      -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 can see, in-left div opens in same time out div if you're using safari/chrome, on firefox open @ different times, messing whole animation.

how can fix this?

an answer not needed because animation effects same in both browsers, stable builds tested.

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 non-answer answer.

to sure, flush out browsers cache , test on pc verification.


Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more