make a shake in css last for only 5 seconds in jquery
2
I have a code which displays an image in class dispbox, when user clicks on dispbox a backgroundimage is added to body and it shakes.
I have done the click function in jquery to start the shake in css.
I want the shake to last for 5 seconds only.
In my code the shake happens neverending and whenever i hover on the background image
How to change my code for making the shake last for only five seconds. and remove the hover from it
$("#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>jquery html css
asked Nov 23 '18 at 6:19
hrkkhrkk
678
add a comment |
2
I have a code which displays an image in class dispbox, when user clicks on dispbox a backgroundimage is added to body and it shakes.
I have done the click function in jquery to start the shake in css.
I want the shake to last for 5 seconds only.
In my code the shake happens neverending and whenever i hover on the background image
How to change my code for making the shake last for only five seconds. and remove the hover from it
$("#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>jquery html css
asked Nov 23 '18 at 6:19
hrkkhrkk
678
add a comment |
2
2
2
I have a code which displays an image in class dispbox, when user clicks on dispbox a backgroundimage is added to body and it shakes.
I have done the click function in jquery to start the shake in css.
I want the shake to last for 5 seconds only.
In my code the shake happens neverending and whenever i hover on the background image
How to change my code for making the shake last for only five seconds. and remove the hover from it
$("#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>jquery html css
asked Nov 23 '18 at 6:19
hrkkhrkk
678
I have a code which displays an image in class dispbox, when user clicks on dispbox a backgroundimage is added to body and it shakes.
I have done the click function in jquery to start the shake in css.
I want the shake to last for 5 seconds only.
In my code the shake happens neverending and whenever i hover on the background image
How to change my code for making the shake last for only five seconds. and remove the hover from it
$("#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>$("#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>$("#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>jquery html css
jquery html css
asked Nov 23 '18 at 6:19
hrkkhrkk
678
asked Nov 23 '18 at 6:19
hrkkhrkk
678
asked Nov 23 '18 at 6:19
hrkkhrkk
678
asked Nov 23 '18 at 6:19
hrkkhrkk
678
asked Nov 23 '18 at 6:19
hrkkhrkk
678
678
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
4
Remove the infinite from the animation and add 5s (duration)
Try this
$("#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>answered Nov 23 '18 at 6:22
ViiraViira
2,348426
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
add a comment |
0
Here is the solution :
.shake:hover {
animation: shake-base 5s ease-in-out;
}
Just change '100ms infinite' to '5s' in value of animation property.
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
add a comment |
0
Use this animation: shake-base 1s;
Change the to 5s if you want it to shake for 5 seconds.
$("#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>answered Nov 23 '18 at 6:24
WildchildWildchild
102310
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441501%2fmake-a-shake-in-css-last-for-only-5-seconds-in-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
Remove the infinite from the animation and add 5s (duration)
Try this
$("#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>answered Nov 23 '18 at 6:22
ViiraViira
2,348426
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
add a comment |
4
Remove the infinite from the animation and add 5s (duration)
Try this
$("#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>answered Nov 23 '18 at 6:22
ViiraViira
2,348426
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
add a comment |
4
4
4
Remove the infinite from the animation and add 5s (duration)
Try this
$("#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>answered Nov 23 '18 at 6:22
ViiraViira
2,348426
Remove the infinite from the animation and add 5s (duration)
Try this
$("#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>$("#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>$("#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>answered Nov 23 '18 at 6:22
ViiraViira
2,348426
answered Nov 23 '18 at 6:22
ViiraViira
2,348426
answered Nov 23 '18 at 6:22
ViiraViira
2,348426
answered Nov 23 '18 at 6:22
ViiraViira
2,348426
2,348426
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
add a comment |
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:29
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
You can use javascript for that
– Viira
Nov 23 '18 at 11:46
add a comment |
0
Here is the solution :
.shake:hover {
animation: shake-base 5s ease-in-out;
}
Just change '100ms infinite' to '5s' in value of animation property.
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
add a comment |
0
Here is the solution :
.shake:hover {
animation: shake-base 5s ease-in-out;
}
Just change '100ms infinite' to '5s' in value of animation property.
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
add a comment |
0
0
0
Here is the solution :
.shake:hover {
animation: shake-base 5s ease-in-out;
}
Just change '100ms infinite' to '5s' in value of animation property.
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
Here is the solution :
.shake:hover {
animation: shake-base 5s ease-in-out;
}
Just change '100ms infinite' to '5s' in value of animation property.
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
edited Nov 23 '18 at 6:59
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
answered Nov 23 '18 at 6:36
Damini MahawerDamini Mahawer
8414
8414
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
add a comment |
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
thank you for the solution, is there a way i can remove the hover effect also, becoz when i mouseover on backgroundimage it still shakes.. how to remove it
– hrkk
Nov 23 '18 at 6:39
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
Can you please clarify what actually you requires? Do you need when image get occurs only at that time it should shake ? Remove .shake:hover css and modify shake class css. .shake { transform-origin: center center; animation: shake-base 0.5s ease-in-out; }
– Damini Mahawer
Nov 23 '18 at 6:45
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
thank for reply, i will explain, i need backgroundimage shake only when i click the first image shown. but when i move the cursor on th background image it still shakes i want to remove that property
– hrkk
Nov 23 '18 at 6:50
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
Please follow the instruction that I have maintained in above comment.
– Damini Mahawer
Nov 23 '18 at 6:52
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
thanks for great help and it worked fine ..
– hrkk
Nov 23 '18 at 6:55
add a comment |
0
Use this animation: shake-base 1s;
Change the to 5s if you want it to shake for 5 seconds.
$("#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>answered Nov 23 '18 at 6:24
WildchildWildchild
102310
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
add a comment |
0
Use this animation: shake-base 1s;
Change the to 5s if you want it to shake for 5 seconds.
$("#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>answered Nov 23 '18 at 6:24
WildchildWildchild
102310
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
add a comment |
0
0
0
Use this animation: shake-base 1s;
Change the to 5s if you want it to shake for 5 seconds.
$("#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>answered Nov 23 '18 at 6:24
WildchildWildchild
102310
Use this animation: shake-base 1s;
Change the to 5s if you want it to shake for 5 seconds.
$("#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>$("#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>$("#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>answered Nov 23 '18 at 6:24
WildchildWildchild
102310
edited Nov 23 '18 at 7:03
answered Nov 23 '18 at 6:24
WildchildWildchild
102310
answered Nov 23 '18 at 6:24
WildchildWildchild
102310
answered Nov 23 '18 at 6:24
WildchildWildchild
102310
102310
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
add a comment |
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
when clicking on image it shakes for 5 seconds that woks, but when when i agin mouseover the backgroundimage it again shakes how to remove this mouse over effect?
– hrkk
Nov 23 '18 at 6:28
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
It is occurring because you have .shake:hover { } Remove it. Check the snippet above.
– Wildchild
Nov 23 '18 at 7:01
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
it worked fine. and solved the problem
– hrkk
Nov 23 '18 at 7:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441501%2fmake-a-shake-in-css-last-for-only-5-seconds-in-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
