在jquery中，使css中的抖动只持续5秒

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

我已经在jquery中完成了click函数，以启动css的shake。

我希望摇晃只持续5秒

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

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

$("#dispbox").click(function() {
$('body').addClass('image').addClass('shake');
});

@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.image {
background-image: url(https://picsum.photos/200/300?image=0);
height: 100vh;
width: 100vw;
}
html {
background: red;
}
.dispbox {
width: 20px;
height: 20px;
}
.dispboximg {
width: 20px;
height: 20px;
}
.shake {
transform-origin: center center;
;
}
.shake:hover {
animation: shake-base 100ms infinite ease-in-out;
}
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-2.5px, -2.5px) rotate(-1.5deg);
}
4% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
6% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
8% {
transform: translate(-0.5px, 1.5px) rotate(-1.5deg);
}
10% {
transform: translate(0.5px, 0.5px) rotate(0.5deg);
}
12% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
14% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
16% {
transform: translate(-1.5px, -2.5px) rotate(0.5deg);
}
18% {
transform: translate(0.5px, -2.5px) rotate(-0.5deg);
}
20% {
transform: translate(-2.5px, -2.5px) rotate(0.5deg);
}
22% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg);
}
24% {
transform: translate(-1.5px, -2.5px) rotate(-1.5deg);
}
26% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
}
28% {
transform: translate(0.5px, 1.5px) rotate(-1.5deg);
}
30% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
32% {
transform: translate(-1.5px, 0.5px) rotate(0.5deg);
}
34% {
transform: translate(-2.5px, 1.5px) rotate(0.5deg);
}
36% {
transform: translate(-0.5px, -2.5px) rotate(-0.5deg);
}
38% {
transform: translate(0.5px, 1.5px) rotate(-0.5deg);
}
40% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
42% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
44% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
46% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
48% {
transform: translate(-1.5px, 0.5px) rotate(-1.5deg);
}
50% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
52% {
transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
}
54% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
56% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
}
58% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
60% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
62% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg);
}
64% {
transform: translate(1.5px, 0.5px) rotate(-1.5deg);
}
66% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
68% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
70% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
72% {
transform: translate(1.5px, -1.5px) rotate(0.5deg);
}
74% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
76% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
78% {
transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
80% {
transform: translate(-2.5px, -1.5px) rotate(-1.5deg);
}
82% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
84% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
86% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
88% {
transform: translate(-2.5px, 0.5px) rotate(-1.5deg);
}
90% {
transform: translate(0.5px, 1.5px) rotate(0.5deg);
}
92% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
94% {
transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
}
96% {
transform: translate(1.5px, -2.5px) rotate(0.5deg);
}
98% {
transform: translate(-2.5px, -0.5px) rotate(-1.5deg);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dispbox" id="dispbox" style="border:none;">
<img src="https://picsum.photos/200/300?image=20;" id="dispboximg" style="border:none;" />
</div>

从动画中删除infinite并添加5s(持续时间(

试试这个

$("#dispbox").click(function() {
$('body').addClass('image').addClass('shake');
});

@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.image {
background-image: url(https://picsum.photos/200/300?image=0);
height: 100vh;
width: 100vw;
}
html {
background: red;
}
.dispbox {
width: 20px;
height: 20px;
}
.dispboximg {
width: 20px;
height: 20px;
}
.shake {
transform-origin: center center;
;
}
.shake:hover {
animation: shake-base 5s ease-in-out;
}
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-2.5px, -2.5px) rotate(-1.5deg);
}
4% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
6% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
8% {
transform: translate(-0.5px, 1.5px) rotate(-1.5deg);
}
10% {
transform: translate(0.5px, 0.5px) rotate(0.5deg);
}
12% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
14% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
16% {
transform: translate(-1.5px, -2.5px) rotate(0.5deg);
}
18% {
transform: translate(0.5px, -2.5px) rotate(-0.5deg);
}
20% {
transform: translate(-2.5px, -2.5px) rotate(0.5deg);
}
22% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg);
}
24% {
transform: translate(-1.5px, -2.5px) rotate(-1.5deg);
}
26% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
}
28% {
transform: translate(0.5px, 1.5px) rotate(-1.5deg);
}
30% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
32% {
transform: translate(-1.5px, 0.5px) rotate(0.5deg);
}
34% {
transform: translate(-2.5px, 1.5px) rotate(0.5deg);
}
36% {
transform: translate(-0.5px, -2.5px) rotate(-0.5deg);
}
38% {
transform: translate(0.5px, 1.5px) rotate(-0.5deg);
}
40% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
42% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
44% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
46% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
48% {
transform: translate(-1.5px, 0.5px) rotate(-1.5deg);
}
50% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
52% {
transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
}
54% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
56% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
}
58% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
60% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
62% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg);
}
64% {
transform: translate(1.5px, 0.5px) rotate(-1.5deg);
}
66% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
68% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
70% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
72% {
transform: translate(1.5px, -1.5px) rotate(0.5deg);
}
74% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
76% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
78% {
transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
80% {
transform: translate(-2.5px, -1.5px) rotate(-1.5deg);
}
82% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
84% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
86% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
88% {
transform: translate(-2.5px, 0.5px) rotate(-1.5deg);
}
90% {
transform: translate(0.5px, 1.5px) rotate(0.5deg);
}
92% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
94% {
transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
}
96% {
transform: translate(1.5px, -2.5px) rotate(0.5deg);
}
98% {
transform: translate(-2.5px, -0.5px) rotate(-1.5deg);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dispbox" id="dispbox" style="border:none;">
<img src="https://picsum.photos/200/300?image=20;" id="dispboximg" style="border:none;" />
</div>

使用此动画：摇动基数1s；

如果您想让它摇晃5秒，请将更改为5s。

$("#dispbox").click(function() {
$('body').addClass('image').addClass('shake');
});

@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.image {
background-image: url(https://picsum.photos/200/300?image=0);
height: 100vh;
width: 100vw;
}
html {
background: red;
}
.dispbox {
width: 20px;
height: 20px;
}
.dispboximg {
width: 20px;
height: 20px;
}
.shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-2.5px, -2.5px) rotate(-1.5deg);
}
4% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
6% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
8% {
transform: translate(-0.5px, 1.5px) rotate(-1.5deg);
}
10% {
transform: translate(0.5px, 0.5px) rotate(0.5deg);
}
12% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
14% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
16% {
transform: translate(-1.5px, -2.5px) rotate(0.5deg);
}
18% {
transform: translate(0.5px, -2.5px) rotate(-0.5deg);
}
20% {
transform: translate(-2.5px, -2.5px) rotate(0.5deg);
}
22% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg);
}
24% {
transform: translate(-1.5px, -2.5px) rotate(-1.5deg);
}
26% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
}
28% {
transform: translate(0.5px, 1.5px) rotate(-1.5deg);
}
30% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
32% {
transform: translate(-1.5px, 0.5px) rotate(0.5deg);
}
34% {
transform: translate(-2.5px, 1.5px) rotate(0.5deg);
}
36% {
transform: translate(-0.5px, -2.5px) rotate(-0.5deg);
}
38% {
transform: translate(0.5px, 1.5px) rotate(-0.5deg);
}
40% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
42% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
44% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
46% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
48% {
transform: translate(-1.5px, 0.5px) rotate(-1.5deg);
}
50% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
52% {
transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
}
54% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
56% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
}
58% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
60% {
transform: translate(1.5px, 0.5px) rotate(-0.5deg);
}
62% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg);
}
64% {
transform: translate(1.5px, 0.5px) rotate(-1.5deg);
}
66% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
68% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
70% {
transform: translate(0.5px, -2.5px) rotate(-1.5deg);
}
72% {
transform: translate(1.5px, -1.5px) rotate(0.5deg);
}
74% {
transform: translate(1.5px, -0.5px) rotate(0.5deg);
}
76% {
transform: translate(1.5px, -1.5px) rotate(-0.5deg);
}
78% {
transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
80% {
transform: translate(-2.5px, -1.5px) rotate(-1.5deg);
}
82% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
84% {
transform: translate(1.5px, -2.5px) rotate(-0.5deg);
}
86% {
transform: translate(1.5px, 0.5px) rotate(0.5deg);
}
88% {
transform: translate(-2.5px, 0.5px) rotate(-1.5deg);
}
90% {
transform: translate(0.5px, 1.5px) rotate(0.5deg);
}
92% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
94% {
transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
}
96% {
transform: translate(1.5px, -2.5px) rotate(0.5deg);
}
98% {
transform: translate(-2.5px, -0.5px) rotate(-1.5deg);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dispbox" id="dispbox" style="border:none;">
<img src="https://picsum.photos/200/300?image=20;" id="dispboximg" style="border:none;" />
</div>

以下是解决方案：

.shake:hover {
animation: shake-base 5s ease-in-out;
}

只需将animation属性的值"100ms infinite"更改为"5s"即可。

相关内容

最新更新

热门标签：