Javascript 如何在预期动画出现之前阻止css旋转回面？

我试图用JS和CSS模拟硬币翻转的动画

我猜关键是CSS中的变换样式、背面可见性、旋转、动画填充模式和变换，以及JS中的Math.random

如果硬币是正面的，一切都好

如果硬币是尾部，单击按钮将其翻转到头部，然后开始预期的翻转动画

如何使其直接从尾部翻转动画

const coin=document.querySelector（“#coin”）；
const button=document.querySelector（“#flip”）；
const status=document.querySelector（“#status”）；
const heads=document.querySelector（“#头数”）；
const tails=document.querySelector（“#tailscont”）；
总人数=0；
设tailscont=0；
函数deferFn（回调，ms）{
设置超时（回调，毫秒）；
}
函数processResult（结果）{
如果（结果=='heads'）{
总人数++；
heads.innerText=人数；
}否则{
tailscont++；
tails.innerText=tailsCount；
}
status.innerText=result.toUpperCase（）；
}
功能flipCoin（）{
coin.setAttribute（'class'，''）；
const random=Math.random（）；
常量结果=随机<0.5？'heads'：'tails'；
deferFn（函数（）{
setAttribute（'class'，'animate-'+结果）；
deferFn（processResult.bind（null，result），2900）；
}, 100);
}
按钮。addEventListener（“点击”，flipCoin）
h2{
保证金：25雷姆；
}
分区集装箱{
保证金：自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
钮扣{
填充：1rem；
背景色：天蓝色；
}
#硬币{
位置：相对位置；
宽度：15雷姆；
高度：15雷姆；
保证金：2rem0rem；
变换样式：保留-3d；
}
#投币处{
宽度：100%；
身高：100%；
边框：2件纯黑；
边界半径：50%；
背面可见性：隐藏；
背景尺寸：包含；
位置：绝对位置；
}
.头{
背景图像：url（“https://en.numista.com/catalogue/photos/inde/2311-original.jpg");
}
.制作头部动画{
动画：flipHeads 3s；
动画填充模式：正向；
}
@关键帧翻转头{
从{
变换：旋转（0度）；
}
到{
变换：旋转（1800度）；
}
}
.尾巴{
背景图像：url（“https://en.numista.com/catalogue/photos/inde/3165-original.jpg");
变换：旋转（-180度）；
}
.制作尾巴动画{
动画：flipTails 3s；
动画填充模式：正向；
}
@关键帧翻转尾巴{
从{
变换：旋转（0度）；
}
到{
变换：旋转（1620度）；
}
}

对你的人生决定感到困惑吗？把这个硬币抛出去！
顺便说一句，别忘了给双方分配一些东西。
不要因为这个愚蠢的掷硬币决定你的人生。我在开玩笑

翻转这个东西
正面：0反面：0


您可以使用css属性：

animation-fill-mode: forwards;

您可以使用css属性：

animation-fill-mode: forwards;