While experimenting with jQuery and CSS3 animations, I encountered a strange issue. When hovering over the card or focusing on the CCV field in my pen, there is a delay in the color transition when the card flips over. It almost seems like it's loading. Any idea what could be causing this? I'm new to jQuery, so please disregard that part unless it's related to the problem.
Find the codepen here: https://codepen.io/maciekmat/pen/MWWVPqX
HTML
<div class="page-container">
<h1>Fill in your card details</h1>
<div class="card-scene">
<div class="card-container">
<div class="card card-front">
<div class="card-numbers">
<p id="cardNumber4">0000</p>
<p id="cardNumber8">0000</p>
<p id="cardNumber12">0000</p>
<p id="cardNumber16">0000</p>
</div>
<p id="cardName">M J SMITH</p>
<div class="sortcode-numbers">
<p id="cardSortCode1">00</p>
<p id="cardSortCode2">00</p>
<p id="cardSortCode3">00</p>
</div>
</div>
<div class="card card-back">
<div class="black-strip"></div>
<div class="ccv-strip">
<p id="cardCcvNum">000</p>
</div>
</div>
</div>
</div>
<form action="">
<label>Account Holder Name</label>
<input type="text" id="cardNameField" class="card-name" required></input>
<label>Card Number</label>
<div class="cardnumber-container">
<input type="text" id="cardField4" maxlength="4" minlength="4" class="card-number" required></input>
<input type="text" id="cardField8" maxlength="4" class="card-number" required></input>
<input type="text" id="cardField12" maxlength="4" class="card-number" required></input>
<input type="text" id="cardField16" maxlength="4" class="card-number" required></input>
</div>
<div class="card-numbers-wrap">
<div class="sortcodes-wrap">
<label>Sort Code</label>
<div class="sortcodes">
<input type="text" id="sortCodeFirst" maxlength="2" class="sort-code" required></input>
<input type="text" id="sortCodeSecond" maxlength="2" class="sort-code" required></input>
<input type="text" id="sortCodeThird" maxlength="2" class="sort-code" required></input>
</div>
</div>
<div class="security-code-wrap">
<label>Security Code (CCV)</label>
<input type="text" id="securityCode" maxlength="3" class="security-code" required></input>
</div>
</div>
<button type="submit" id="cardSubmit">Submit</button>
</form>
<!-- <a id="cardSubmit">Submit</a> -->
</div>
CSS:
*{
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;
}
...
jQuery:
$("#cardSubmit").on("click", function (e) {
e.preventDefault();
// Logic
});
$(".card-number").keyup(function () {
// Logic
});
$(".sort-code").keyup(function () {
// Logic
});
$(".card-container").hover(function () {
// Logic
});
$('#securityCode').focusin(function () {
// Logic
});
$('#securityCode').focusout(function () {
// Logic
});