Long time user, first time poster.
The animations work perfectly on PC and on iPhone firefox/Safari but not on iPhone Chrome. (upto date).
The animations just appear to snap to the end location after the animation duration. I did get it working briefly however I think it was due to it caching an older version of my CSS. and I'm not sure which one or what was different. Point being i know it can work.
Any help greatly appreciated. I cleaned up the code as best I can. The working code has comments EVERYWHERE. There is a little more to the code but this is the core of it.
also running Bootstrap4 for info.
$(".flip-card-inner").on('click mouseenter', function () {
// $(this).css("animation-play-state", "initial"); // pause Y axis rotate
// $(this).css("animation-play-state", "paused");
$("div.link").each(function(index) {
$(this).delay(150*index).slideDown("fast");
$(".flip-card-inner").addClass('fliptoback');
});
});body {
height:100vh;
background-color: #3a4757;
background-image: url("img/grey_wash_wall.png");
background-blend-mode: hard-light;
background-size: 25%;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 200px;
border-radius: .7rem ;
border-color: black;
-webkit-perspective: 500px;
perspective: 500px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
-webkit-transition: -webkit-transform;
transition: transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #181E25;
background-image: url("img/brushed.jpg");
background-blend-mode: multiply;
background-size:25%;
border-radius: .7rem ;
border-color: #181E25;
color: white;
}
/* Style the back side */
.flip-card-back {
background-color: #181E25;
background-image: url("img/brushed.jpg");
background-blend-mode: multiply;
background-size:25%;
border-radius: .7rem ;
border-color: #181E25;
color: white;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.fliptoback{
animation-name: yaxis;
animation-duration: .5s;
animation-fill-mode: forwards;
}
@keyframes yaxis {
from {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-card">
<div class=" flip-card-inner" >
<div class=" flip-card-front" >
<p>this is the front</p>
</div>
<div class=" flip-card-back" >
<p>this is the back</p>
</div>
</div>
</div>
<div class="brandbox">
<h3 class="text-center text-light font-weight-light mt-3 text-uppercase">BRAND</h3>
</div>
<div class="link text-light border border-light text-uppercase">
Website
</div>