在jquery中，在css中进行抖动仅持续5秒

我有一个代码，在类dispbox中显示一个图像，当用户单击dispbox时，背景图像被添加到身体，并且它抖动

我已经在jquery中执行了单击功能，以在css中启动抖动

我希望震动只持续5秒钟。

在我的代码中，每当我在背景图像上悬停时，抖动就会发生

如何更改我的代码，使震动只持续五秒钟。并从中移除悬停

$（“#dispbox”）。单击（函数（）{
$（'body'）.addClass（'image'）.addClass（'shake'）；
});
@导入url(https://fonts.googleapis.com/css?family=Gentium+基本的）；
@导入url(https://fonts.googleapis.com/css?family=Dancing+剧本）；
.形象{
背景图片：url(https://picsum.photos/200/300?image=0);
高度：100vh；
宽度：100vw；
}
html{
背景：红色；
}
.显示框{
宽度：20px；
高度：20px；
}
.dispboximg{
宽度：20px；
高度：20px；
}
.摇{
变换原点：中心；
;
}
.摇晃：悬停{
动画：摇动基础100毫秒无限轻松输入输出；
}
@关键帧抖动基础{
0% {
变换：平移（0px，0px）旋转（0deg）；
}
2% {
变换：平移（-2.5px，-2.5px）旋转（-1.5度）；
}
4% {
变换：平移（1.5px，0.5px）旋转（0.5度）；
}
6% {
变换：平移（1.5px，-0.5px）旋转（0.5度）；
}
8% {
变换：平移（-0.5px，1.5px）旋转（-1.5度）；
}
10% {
变换：平移（0.5px，0.5px）旋转（0.5度）；
}
12% {
变换：平移（1.5px，-2.5px）旋转（-0.5度）；
}
14% {
变换：平移（1.5px，-0.5px）旋转（0.5度）；
}
16% {
变换：平移（-1.5px，-2.5px）旋转（0.5度）；
}
18% {
变换：平移（0.5px，-2.5px）旋转（-0.5度）；
}
20% {
变换：平移（-2.5px，-2.5px）旋转（0.5度）；
}
22% {
变换：平移（-0.5px，-1.5px）旋转（0.5度）；
}
24% {
变换：平移（-1.5px，-2.5px）旋转（-1.5度）；
}
26% {
变换：平移（-1.5px，1.5px）旋转（-0.5度）；
}
28% {
变换：平移（0.5px，1.5px）旋转（-1.5度）；
}
30% {
变换：平移（-0.5px，1.5px）旋转（0.5度）；
}
32% {
变换：平移（-1.5px，0.5px）旋转（0.5度）；
}
34% {
变换：平移（-2.5px，1.5px）旋转（0.5度）；
}
36% {
变换：平移（-0.5px，-2.5px）旋转（-0.5度）；
}
38% {
变换：平移（0.5px，1.5px）旋转（-0.5度）；
}
40% {
变换：平移（1.5px，-1.5px）旋转（-0.5度）；
}
42% {
变换：平移（-0.5px，0.5px）旋转（-0.5度）；
}
44% {
变换：平移（1.5px，1.5px）旋转（0.5度）；
}
46% {
变换：平移（0.5px，-1.5px）旋转（0.5度）；
}
48% {
变换：平移（-1.5px，0.5px）旋转（-1.5度）；
}
50% {
变换：平移（-0.5px，-1.5px）旋转（-0.5度）；
}
52% {
变换：平移（-0.5px，1.5px）旋转（-0.5度）；
}
54% {
变换：平移（-1.5px，1.5px）旋转（0.5度）；
}
56% {
变换：平移（-1.5px，-0.5px）旋转（-0.5度）；
}
58% {
变换：平移（1.5px，0.5px）旋转（-0.5度）；
}
60% {
变换：平移（1.5px，0.5px）旋转（-0.5度）；
}
62% {
变换：平移（-1.5px，-1.5px）旋转（0.5度）；
}
64% {
变换：平移（1.5px，0.5px）旋转（-1.5度）；
}
66% {
变换：平移（1.5px，-0.5px）旋转（0.5度）；
}
68% {
变换：平移（0.5px，-2.5px）旋转（-1.5度）；
}
70% {
变换：平移（0.5px，-2.5px）旋转（-1.5度）；
}
72% {
变换：平移（1.5px，-1.5px）旋转（0.5度）；
}
74% {
变换：平移（1.5px，-0.5px）旋转（0.5度）；
}
76% {
变换：平移（1.5px，-1.5px）旋转（-0.5度）；
}
78% {
变换：平移（1.5px，-1.5px）旋转（-1.5度）；
}
80% {
变换：平移（-2.5px，-1.5px）旋转（-1.5度）；
}
82% {
变换：平移（1.5px，-2.5px）旋转（-0.5度）；
}
84% {
变换：平移（1.5px，-2.5px）旋转（-0.5度）；
}
86% {
变换：平移（1.5px，0.5px）旋转（0.5度）；
}
88% {
变换：平移（-2.5px，0.5px）旋转（-1.5度）；
}
90% {
变换：平移（0.5px，1.5px）旋转（0.5度）；
}
92% {
变换：平移（-1.5px，1.5px）旋转（0.5度）；
}
94% {
变换：平移（-0.5px，0.5px）旋转（-1.5度）；
}
96% {
变换：平移（1.5px，-2.5px）旋转（0.5度）；
}
98% {
变换：平移（-2.5px，-0.5px）旋转（-1.5度）；
}
}
从动画中删除
无限
，并添加
5s
（持续时间）

试试这个


$（“#dispbox”）。单击（函数（）{
$（'body'）.addClass（'image'）.addClass（'shake'）；
});
@导入url(https://fonts.googleapis.com/css?family=Gentium+基本的）；
@导入url(https://fonts.googleapis.com/css?family=Dancing+剧本）；
.形象{
背景图片：url(https://picsum.photos/200/300?image=0);
高度：100vh；
宽度：100vw；
}
html{
背景：红色；
}
.显示框{
宽度：20px；
高度：20px；
}
.dispboximg{
宽度：20px；
高度：20px；
}
.摇{
变换原点：中心；
;
}
.摇晃：悬停{
动画：摇动底座5s，轻松进出；
}
@关键帧抖动基础{
0% {
变换：平移（0px，0px）旋转（0deg）；
}
2% {
变换：平移（-2.5px，-2.5px）旋转（-1.5度）；
}
4% {
变换：平移（1.5px，0.5px）旋转（0.5度）；
}
6% {
变换：平移（1.5px，-0.5px）旋转（0.5度）；
}
8% {
变换：平移（-0.5px，1.5px）旋转（-1.5度）；
}
10% {
变换：平移（0.5px，0.5px）旋转（0.5度）；
}
12% {
变换：平移（1.5px，-2.5px）旋转（-0.5度）；
}
14% {
转换：翻译(
.shake:hover {
  animation: shake-base 5s ease-in-out;
}