长期用户，第一次发帖。
这些动画在 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: …