Javascript 在点击按钮时连续重复CSS转换/动画持续时间？

我有一张简单的双面“卡片”，正面有一个按钮（标有“下一步”），背面有另一个按钮（标有“背面”）。每个按钮都会触发jquery，使用转换持续时间垂直旋转“卡片”：2秒，这样就可以看到卡片正在被“翻转”，而不仅仅是瞬间翻转。我的问题是，在按下每个按钮一次后，我无法再次触发“过渡持续时间/动画持续时间”。我可以试着把它放在Jquery函数中，但我不明白为什么每次点击按钮都不会触发CSS动画持续时间（每个按钮只能点击一次，“卡”会相应地翻转到后面，然后在我按下一次按钮后再次翻转到前面）。我已经从表格中取出了大部分信息，因此更容易说出我的要求。任何帮助都将不胜感激

$（文档）.ready（函数（）{
$（“输入[name='next']”）。在（“单击”，函数（）上）{
log（“下一个按钮工作了！”）；
$（“.form”）.css（“变换”、“旋转（180度）”）；
})
$（“输入[name='back']”）。在（“单击”，函数（）上）{
log（“后退按钮起作用了！”）；
$（“.formflipreach”）.css（“变换”、“旋转（180度）”）；
})
});
函数展示（）{
setTimeout（函数（）{
document.getElementById（“背面”）.style.display=“块”；
}, 600);
setTimeout（函数（）{
document.getElementById（“frontSide”）.style.display=“无”；
}, 600);
};
函数showFront（）{
setTimeout（函数（）{
document.getElementById（“frontSide”）.style.display=“block”；
}, 600);
setTimeout（函数（）{
document.getElementById（“背面”）.style.display=“无”；
}, 600);
};
.form{
变换样式：保留-3d；
-webkit转换持续时间：2s；
-moz转换持续时间：2s；
-o-过渡持续时间：2s；
过渡时间：2s；
}
又来了{
变换样式：保留-3d；
-webkit转换持续时间：2s；
-moz转换持续时间：2s；
-o-过渡持续时间：2s；
过渡时间：2s；
}
#弯曲{
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
对齐项目：项目之间的间距；
}
.formTitle{
边框底部：纯红色；
}
.表格样式-5{
位置：相对位置；
顶部：0px；
最大宽度：60%；
最大高度：82vh；
填充：10px 20px；
背景#f4f7f8；
利润率：10px自动；
边界半径：8px；
字体系列：“先锋派”，先锋派，“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；
}
#形式-风格-5-动画{
动画：幻灯片3s1；
}
@关键帧滑动{
0% {
转换：translate3d（0px，1000%，0px）；
}
100% {
转换：translate3d（0px，0%，0px）；
}
}
.form-style-5：之后{
不透明度：1；
}
.form-style-5字段集{
边界：无；
}
.form-style-5图例{
字号：1.4em；
边缘底部：10px；
}
.form-style-5标签{
字体大小：1.3em；
显示：块；
边缘底部：8px；
}
.form-style-5输入[type=“text”]，
.form-style-5输入[type=“date”]，
.form-style-5输入[type=“datetime”]，
.form-style-5输入[type=“email”]，
.form-style-5输入[type=“location”]，
.form-style-5输入[type=“number”]，
.form-style-5输入[type=“search”]，
.form-style-5输入[type=“time”]，
.form-style-5输入[type=“url”]，
.form-style-5选择{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
背景：rgba（255,255,255,1）；
边界：无；
边界半径：4px；
字体大小：16px；
保证金：0；
大纲：0；
左：2%；
身高：6%；
宽度：100%；
-webkit框大小：边框框；
-moz框大小：边框框；
背景色：#e8eeef；
颜色：#8a97a0；
-webkit盒阴影：0 1px 0 rgba（0,0,0,0.03）插图；
框阴影：0 1px 0 rgba（0,0,0,0.03）插入；
利润底部：3%；
}
.form-style-5文本区{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
背景：rgba（255,255,255,1）；
边界：无；
边界半径：4px；
字体大小：16px；
保证金：0；
大纲：0；
左：2%；
身高：12%；
/*更改任务文本区域的高度*/
宽度：100%；
-webkit框大小：边框框；
-moz框大小：边框框；
背景色：#e8eeef；
颜色：#8a97a0；
-webkit盒阴影：0 1px 0 rgba（0,0,0,0.03）插图；
框阴影：0 1px 0 rgba（0,0,0,0.03）插入；
利润底部：3%；
}
.form-style-5输入[type=“text”]：焦点，
.form-style-5输入[type=“date”]：焦点，
.form-style-5输入[type=“datetime”]：焦点，
.form-style-5输入[type=“email”]：焦点，
.form-style-5输入[type=“number”]：焦点，
.form-style-5输入[type=“search”]：焦点，
.form-style-5输入[type=“time”]：焦点，
.form-style-5输入[type=“location”]：焦点，
.form-style-5文本区域：焦点，
.form-style-5选择：焦点{
背景：#d2d9dd；
}
.form-style-5选择{
-webkit外观：菜单列表按钮；
高度：35px；
}
.表格样式-5.编号{
背景：红色；
颜色：#FCFBE3；
高度：25px；
宽度：25px；
显示：内联块；
字号：0.8em；
保证金权利：4px；
线高：25px；
文本对齐：居中；
文本阴影：0 1px 0 rgba（255、255、255、0.2）；
边界半径：0px 15px 15px 15px；
利润底部：3%；
}
.form-style-5输入[type=“submit”]，
.form-style-5输入[type=“button”]{
位置：相对位置；
显示：块；
填充：10px 39px 10px 39px；
颜色：#FCFBE3；
保证金：0自动；
背景：红色；
字体大小：22px；
文本对齐：居中；
字体风格：普通；
宽度：100%；
边框：1px纯红；
边框宽度：1px 1px 3px；
边缘底部：10px；
盒影：0 5px 0#b30000；
边界半径：4px；
}
.form-style-5输入[type=“backButton”]{
位置：相对位置；
显示：块；
填充：10px 39px 10px 39px；
颜色：#FCFBE3；
保证金：0自动；
背景：红色；
字体大小：22px；
文本对齐：居中；
字体风格：普通；
宽度：140px；
边框：1px纯红；
边框宽度：1px 1px 3px；
边缘底部：10px；
盒影：0 5px 0#b30000；
边界半径：4px；
}
.form-style-5输入[type=“submit”]：激活，
.form-style-5输入[type=“button”]：激活{
转换：translateY（3px）；