长期用户，第一次发帖。
动画在 PC 和 iPhone firefox/Safari 上完美运行，但不适用于 iPhone Chrome。 （最新）。
动画似乎只是在动画持续时间后捕捉到结束位置。我确实让它短暂地工作了但是我认为这是因为它缓存了我的 CSS 的旧版本。我不确定是哪一个或有什么不同。重点是我知道它可以工作。
非常感谢任何帮助。我尽我所能清理了代码。工作代码到处都有注释。代码还有一点，但这是它的核心。
还运行 Bootstrap4 以获取信息。
$(".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>