Javascript 使用CSS变换和元素的动画缩放实现Truble

我有一个图标，在加载时反弹，然后在角落缩小。悬停时，它使用transition:transform正确地上下缩放

我在setInterval和第一次加载时启动反弹。问题是，在反弹时，它会缩放，而不会出现“轻松”动画。它只是立即收缩。我重复一遍，悬停时它工作正常。我想在反弹前后与悬停缩放动画相同。JS解决方案也不错

我尝试了各种各样的方法，并想出了如何让它发挥作用，请指教

window.setInterval（函数（）{
$（“.email”）.toggleClass（“bounceemail”）；
}, 5000);
.bounceemail{
-webkit动画名称：bounce；
动画名称：弹跳；
-webkit动画持续时间：2秒；
动画持续时间：2秒；
}
.电邮{
最大宽度：150px；
位置：固定；
底部：0px；
右：0px；
边缘底部：5px；
右边距：5px；
z指数：70；
-webkit过滤器：投影（3px 3px 2px黑色）；
转换：转换0.3s；
转换：比例（0.6）转换（+35%，+35%）；
过渡时间功能：轻松进入；
}
。电邮：悬停{
转变：转变0.2s；
变换：缩放（1）平移（0%，0%）；
过渡定时功能：缓解；
}
@-webkit关键帧反弹{
0%,
20%,
55%,
75%,
100% {
-webkit转换：translateY（0）；
}
40% {
-webkit转换：translateY（-45px）；
}
60% {
-webkit转换：translateY（-35px）；
}
}
@关键帧反弹{
0%,
20%,
55%,
75%,
100% {
-webkit转换：translateY（0）；
}
40% {
-webkit转换：translateY（-45px）；
}
60% {
-webkit转换：translateY（-35px）；
}
}


$（“.email”）。在（“animationend”，（）=>{
$（“.email”）.toggleClass（“bounceemail”）
setTimeout（（）=>$（“.email”）.toggleClass（“bounceemail”），5000；
});
.bounceemail{
-webkit动画名称：bounce；
动画名称：弹跳；
-webkit动画持续时间：2秒；
动画持续时间：2秒；
}
.电邮{
最大宽度：150px；
位置：固定；
底部：0px；
右：0px；
边缘底部：5px；
右边距：5px；
z指数：70；
-webkit过滤器：投影（3px 3px 2px黑色）；
}
.收缩{
转换：转换0.3s；
转换：比例（0.6,0.6）转换（30%，30%）；
过渡时间功能：轻松进入；
}
。电邮：悬停{
转变：转变0.2s；
变换：缩放（1）平移（0%，0%）；
过渡定时功能：缓解；
}
@-webkit关键帧反弹{
0%,
20%,
55%,
75%,
100% {
-webkit转换：translateY（0）；
}
40% {
-webkit转换：translateY（-45px）；
}
60% {
-webkit转换：translateY（-35px）；
}
100% {
转换：比例（0.6,0.6）转换（30%，30%）；
}
0% {
转换：比例（0.6,0.6）转换（30%，30%）；
}
}
@关键帧反弹{
0%,
20%,
55%,
75%,
100% {
-webkit转换：translateY（0）；
}
40% {
-webkit转换：translateY（-45px）；
}
60% {
-webkit转换：translateY（-35px）；
}
100% {
转换：比例（0.6,0.6）转换（30%，30%）；
}
0% {
转换：比例（0.6,0.6）转换（30%，30%）；
}
}
太棒了！我确实试过在关键帧中放置transform:scale，但在没有新类的情况下做了一些错误或错误的事情！这太棒了！谢谢