Reputation: 473
Hello i want this shivering animation or effect on hover same in the url. Kindly guide me Please.Any reference would be appreciated. Demo https://expatexplorer.hsbc.com/survey/#/countries (On the map hover any country circle and see moving other small circles.
Upvotes: 0
Views: 782
Reputation: 21663
Very simple example: There are many libraries that handle animation > jRumble / CSSshake / Animate.css
body {
background-color: #fff;
text-align: center;
margin: 50px
}
.wrapper {
top: 100px;
left: 50%;
text-align: center;
display: inline-block;
}
.shake {
display: inline-block;
position: relative;
}
.circle {
border: 4px solid #f00;
background: #f00;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 0px -10px;
}
@-webkit-keyframes circled {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
.shake:hover,
.shake:focus {
cursor: pointer;
-webkit-animation-name: circled;
-webkit-animation-duration: 0.9s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
<div class="wrapper">
<div class="circle shake"></div>
<div class="circle shake"></div>
<div class="circle shake"></div>
</div>
Upvotes: 1
Reputation: 33823
It's done using Flash rather than css & jQuery - so unless you know Flash or can find that fla file then it will not be a straightforward task.
Upvotes: 0