Javascript 如何在单击时播放关键帧动画？

每次单击长方体时，我都要创建一个关键帧动画。但是当我点击盒子时，动画只工作一次。我希望每次单击长方体时动画都能正常工作

有什么帮助吗？ 谢谢

$（文档）.ready（函数（）{
$（“#rocketstart”）。单击（函数（）{
$（“.rocket”）.css（“动画播放状态”、“运行”）；
});
});

.rocket{
背景色：红色；
宽度：550px；
高度：300px；
光标：指针；
背景重复：无重复；
右边距：-340px；
边缘底部：-110px；
动画名称：火箭；
动画持续时间：1s；
动画播放状态：暂停；
}
@火箭关键帧{
0%{transform:translate（0）}
100%{transform:translate（0，-50%）}
70%{不透明度：1；}
100%{不透明度：0；}
}

---

将动画属性移动到新类中，并在动画结束时删除该类，而不是更改动画的状态：

$（文档）.ready（函数（）{
$（“#rocketstart”）。单击（函数（）{
$（“.rocket”）.addClass（“动画”）；
});
$（'.rocket'）。打开（“animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd”，函数（）{
$（此）.removeClass（“动画”）；
});
});
.rocket{
背景色：红色；
宽度：550px；
高度：300px；
光标：指针；
背景重复：无重复；
右边距：-340px；
边缘底部：-110px；
}
.动画{
动画名称：火箭；
动画持续时间：1s；
}
@火箭关键帧{
0%{transform:translate（0）}
100%{transform:translate（0，-50%）}
70%{不透明度：1；}
100%{不透明度：0；}
}

您的答案在这里非常详细：或者，您可以使用
animationiteration
事件并切换
动画播放状态，而不是在
animationend
上切换整个动画。这要求动画具有
动画迭代计数：无限