title: Slow load on card flip using RotateY
body: <p>I am playing around with jQuery and CSS3 animations and noticed something weird happening. On my pen, when you hover over the card or focus on the CCV field, when the card flips over it takes a second for the colour to pull through. It almost looks like its loading. Anyone aware of what might be happening here? I only started working jQuery so ignore that code, unless thats whats causing the issues.</p>
  
  <p>codepen: <a href="https://codepen.io/maciekmat/pen/MWWVPqX" rel="nofollow noreferrer">https://codepen.io/maciekmat/pen/MWWVPqX</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="page-container"&gt;
  
    &lt;h1&gt;Fill in your card details&lt;/h1&gt;
    &lt;div class="card-scene"&gt;
      &lt;div class="card-container"&gt;
        &lt;div class="card card-front"&gt;
          &lt;div class="card-numbers"&gt;
            &lt;p id="cardNumber4"&gt;0000&lt;/p&gt;
            &lt;p id="cardNumber8"&gt;0000&lt;/p&gt;
            &lt;p id="cardNumber12"&gt;0000&lt;/p&gt;
            &lt;p id="cardNumber16"&gt;0000&lt;/p&gt;
          &lt;/div&gt;
          &lt;p id="cardName"&gt;M J SMITH&lt;/p&gt;
          &lt;div class="sortcode-numbers"&gt;
            &lt;p id="cardSortCode1"&gt;00&lt;/p&gt;
            &lt;p id="cardSortCode2"&gt;00&lt;/p&gt;
            &lt;p id="cardSortCode3"&gt;00&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card card-back"&gt;
          &lt;div class="black-strip"&gt;&lt;/div&gt;
          &lt;div class="ccv-strip"&gt;
            &lt;p id="cardCcvNum"&gt;000&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;form action=""&gt;
      &lt;label&gt;Account Holder Name&lt;/label&gt;
      &lt;input type="text" id="cardNameField" class="card-name" required&gt;&lt;/input&gt;
      &lt;label&gt;Card Number&lt;/label&gt;
      &lt;div class="cardnumber-container"&gt;
        &lt;input type="text" id="cardField4" maxlength="4" minlength="4" class="card-number" required&gt;&lt;/input&gt;
        &lt;input type="text" id="cardField8" maxlength="4" class="card-number" required&gt;&lt;/input&gt;
        &lt;input type="text" id="cardField12" maxlength="4" class="card-number" required&gt;&lt;/input&gt;
        &lt;input type="text" id="cardField16" maxlength="4" class="card-number" required&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;div class="card-numbers-wrap"&gt;
        &lt;div class="sortcodes-wrap"&gt;
          &lt;label&gt;Sort Code&lt;/label&gt;
          &lt;div class="sortcodes"&gt;
            &lt;input type="text" id="sortCodeFirst" maxlength="2" class="sort-code" required&gt;&lt;/input&gt;
            &lt;input type="text" id="sortCodeSecond" maxlength="2" class="sort-code" required&gt;&lt;/input&gt;
            &lt;input type="text" id="sortCodeThird" maxlength="2" class="sort-code" required&gt;&lt;/input&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="security-code-wrap"&gt;
          &lt;label&gt;Security Code (CCV)&lt;/label&gt;
          &lt;input type="text" id="securityCode" maxlength="3" class="security-code" required&gt;&lt;/input&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" id="cardSubmit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    &lt;!--       &lt;a id="cardSubmit"&gt;Submit&lt;/a&gt; --&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*{
    box-sizing: border-box;
  }
  
  p, a, h1{
    padding: 0;
    margin: 0;
  }
  
  body{
    font-family: 'Quicksand', sans-serif;
  }
  
  .page-container{
    width: 350px;
    margin: auto;
    display: flex;
    flex-direction: column;
  }
  
  
  .card-scene{
    perspective: 600px;
  }
  
  .card{
    position: absolute;
    margin-top: 1em;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 8px;
    padding: 0 0 26px 40px;
    transition:all .5s ease;
    backface-visibility: hidden;
  
    p{
      margin-right: 12px;
      letter-spacing: 4px;
      margin-top: 5px;
    }
  
    #cardName{
      margin-top: 22px;
      text-transform: uppercase;
    }
  
  }
  
  .card-container{
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }
  
  .card-container.is-flipped {
    transform: rotateY(180deg);
  }
  
  .card-front{
    background: rgb(228,228,228);
  background: linear-gradient(90deg, rgba(228,228,228,1) 0%, rgba(207,207,207,1) 50%, rgba(132,18,189,1) 50%, rgba(20,106,162,1) 100%);
    background-size: 200% 100%;
    background-position: left bottom;
  }
  
  .card-back{
    transform: rotateY(180deg);
    background: rgb(228,228,228);
  background: linear-gradient(90deg, rgba(228,228,228,1) 0%, rgba(207,207,207,1) 50%, rgba(20,106,162,1) 50%, rgba(132,18,189,1) 100%);
    background-size: 200% 100%;
    background-position: left bottom;
  }
  
  .card-numbers{
    display: flex;
    flex-direction: row;
  }
  
  .sortcode-numbers{
    display: flex;
    flex-direction: row;
  
    p{
      margin: 0;
    }
  
    p::after{
      content: "-";
      margin: 0 5px;
    }
  
    p:last-child::after{
      content: "";
    }
  }
  
  form{
    margin-top: 14em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
  }
  
  input{
    margin: 1em 0 0;
    padding: 14px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
  }
  
  input:focus{
    transition: .2s ease;
    outline: none !important;
    border:1px solid #4d3db0;
    box-shadow: 0 0 8px rgba(132,18,189, 0.3);
  }
  
  .cardnumber-container{
    display: flex;
    justify-content: space-between;
  }
  
  .card-number{
    width: 23%;
  }
  
  .card-name{
    width: 100%;
    text-align: left;
    text-transform: uppercase;
  }
  
  label{
    padding-left: 5px;
    margin-top: 1em;
  }
  
  .sortcodes{
    display: flex;
    flex-direction: row;
  }
  
  .sortcodes-wrap{
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  
  .sort-code{
    width: 50px;
    margin-right: 10px;
  }
  
  .security-code{
    width: 70px;
  }
  
  .security-code-wrap{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .card-numbers-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  #cardSubmit{
    background: lightgrey;
    padding: 13px 28px;
    border-radius: 5px;
    margin-top: 2em;
    cursor: pointer;
  }
  
  .black-strip{
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 40px;
    background: black;
  }
  .ccv-strip{
    position: absolute;
    top: 70px;
    left: 10px;
    width: 250px;
    height: 35px;
    background: white;
  
    p{
      float: right;
      margin-top: 7px;
    }
  }
  
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("#cardSubmit").on("click", function (e) {
      e.preventDefault();
      // Grab entered card number fields
      const cardNumberFirst = $("#cardField4").val();
      const cardNumberSecond = $("#cardField8").val();
      const cardNumberThird = $("#cardField12").val();
      const cardNumberFourth = $("#cardField16").val();
  
      // Grab entered sort code number fields
      const sortCodeFirst = $("#sortCodeFirst").val();
      const sortCodeSecond = $("#sortCodeSecond").val();
      const sortCodeThird = $("#sortCodeThird").val();
  
      // Grab entered name field
      const cardName = $("#cardNameField").val();
  
      // Print the entered values onto the card
      $("#cardNumber4").html(cardNumberFirst);
      $("#cardNumber8").html(cardNumberSecond);
      $("#cardNumber12").html(cardNumberThird);
      $("#cardNumber16").html(cardNumberFourth);
      $("#cardSortCode1").html(sortCodeFirst);
      $("#cardSortCode2").html(sortCodeSecond);
      $("#cardSortCode3").html(sortCodeThird);
      $("#cardName").html(cardName);
  
      // Change colour of card
  
      $(".card-front, .card-back").css({
          "background-position": "right bottom",
          color: "white"
      });
  });
  
  $(".card-number").keyup(function () {
      if (this.value.length == this.maxLength) {
          $(this)
              .next(".card-number")
              .focus();
      }
  });
  
  $(".sort-code").keyup(function () {
      if (this.value.length == this.maxLength) {
          $(this)
              .next(".sort-code")
              .focus();
      }
  });
  
  $(".card-container").hover(function () {
      $(this).toggleClass("is-flipped");
  });
  
  $('#securityCode').focusin(function () {
      $('.card-container').addClass("is-flipped");
  });
  
  $('#securityCode').focusout(function () {
      $('.card-container').removeClass("is-flipped");
  });
  </code></pre>