Develop Reference

How can I get all 6 sides of a 3d cube to show in react.js?

So I am creating my website portfolio where I have a 3d cube spinning in the about page that shows languages that I am familiar with and for some reason, there are only 4 sides that show when I want to show all 6 sides. The cube spins as intended but for some reason only 4 of the 6 sides are showing.
my file:
<div className="stage-cube-cont">
<div className="cubespinner">
<div className="face1">
<FontAwesomeIcon icon={faPython} color="#DD0031" />
</div>
<div className="face2">
<FontAwesomeIcon icon={faHtml5} color="#F06529" />
</div>
<div className="face3">
<FontAwesomeIcon icon={faCss3} color="#28A4D9" />
</div>
<div className="face4">
<FontAwesomeIcon icon={faGitAlt} color="#EC4D28" />
</div>
<div className="face5">
<FontAwesomeIcon icon={faJsSquare} color="#dd700" />
</div>
<div className="face6">
<FontAwesomeIcon icon={faReact} color="#5ED4F4" />
</div>
</div>
</div>
The CSS file:
.cubespinner {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 100px 100px 0;
margin-left: calc(50% - 100px);
div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.4);
text-align: center;
font-size: 100px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px 0px lightyellow;
}
.face1 {
transform: translateZ(100px);
color: #dd0031;
}
.face2 {
transform: rotateY(90deg) translateZ(100px);
color: #f06529;
}
.face3 {
transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
color: #28a4d9;
}
.face4 {
transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
color: #5ed4f4;
}
.face5 {
transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
color: #efd81d;
}
.face6 {
transform: rotateX(-90deg) translateZ(100px);
color: #ec4d28;
}
}
#keyframes spincube {
from,
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
}
Any help is much appreciated!

Your animation works for me on Chrome and Firefox although it gets janky after the 4th face, and different depending on the browser: https://stackblitz.com/edit/react-ts-15jx1h?file=style.scss
If you apply transformations in different orders between keyframes, you leave it up to the browser to interpolate the correct transformation between each keyframe. This can cause some extra spinning in random directions, even though the final state is the same.
To make it consistent I'd suggest copy / pasting the previous keyframe's transformation into the next, and just adding an additional 90 degree turn to each.
#keyframes spincube {
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg);
}
66% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg);
}
83% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
rotateZ(90deg);
}
100% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
rotateZ(90deg) rotateX(-90deg);
}
}
Fixed version: https://stackblitz.com/edit/react-ts-zbpcx2?file=style.scss

Combine two class div

I am trying to combine two div classes together so it will work. Link : I cant combine this and this I have done this. I am trying to combine those things together,but I can't.How can I do that?The only it works is shake the image,I want both to be together work.I put now the .overlay from link one into the auto style3.
the css code is
img:hover {
animation: shake 0.2s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.auto-style3 {
margin-top: 0px;
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.auto-style4 {
background-color: #FF0000;
}
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
}
and the code that I have in is
<div class="container" >
<img src="avatar.jpg" alt="Avatar" width="278" height="262" class="style3" >
<div class="auto-style3">
Avatar is ON
</div>
</div>

I did a straight copy/paste from both sources, then changed the first line of CSS in the snippet below (img:hover -> .container:hover)
.container:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.fa-user:hover {
color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<a href="#" class="icon" title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>

Not able to restart animation

I am trying to restart css animation when contents of div is changed. I have tried all method i can find googling none of them seems to work. I have tried
JQUERY
$("p1").removeClass("content");
$("p1").addClass("content");
JAVASCRIPT
var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
and some other methods like setting display to none and then block or changing animationName
Here is my code
HTML
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<img src="img/saying.png" class="statusclound"/>
<p class="status"></p>
<img class="frame" src="img/splash_1.png" id="frame_1"/>
</div>
</div>
CSS
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
#keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
JAVASCRIPT
function test() {
var currentPatch = document.getElementById("p" + patchTurn);
currentPatch.getElementsByClassName("person")[0].style.backgroundImage = "url(http://localhost:80/slingshot/uploads/" + jsonData[3] + ")";
currentPatch.getElementsByClassName("status")[0].innerHTML = jsonData[2];
currentPatch.getElementsByClassName("frame")[0].src = "img/splash_" + randomFrame + ".png";
currentPatch.style.animationName = "buzz-out";
currentPatch.style.display = "block";
}
So when the page loads div is disabled and test() function runs and div animates but when i change some content inside that div and re-run test() function it doesn't animate.

I'm not too clear on what part you need help with so I've made a working JSfiddle that shows all of it working.
I created an event listener for changes in the div and adds the class "content-active" to the div. This class adds the animation name and sets the display to block. Then the class is removed and re-added to restart the animation. To get the animation to restart, I set a 10ms delay. (You can also clone the div if you'd like)
https://jsfiddle.net/heraldo/zyjuoLt1/
JS:
// watch for changes in the DOM
$('#content').bind("DOMSubtreeModified",function(){
// clear any previous animation
$("#p1").removeClass("content-active");
// setting a timeout allows the animation to restart
// NOTE, you can also clone the element and re-add it to do
// the same thing.
setTimeout(function(){ $("#p1").addClass("content-active"); }, 10);
});
// simply adds text to the status <p>
$('#modify').click(function(){
$(".person").append('text ');
});
CSS:
#content {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
.content-active{
display: block;
animation-name: buzzOut;
}
#keyframes buzzOut {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
HTML:
<!-- simply adds text to the div -->
<button id="modify">Add Text</button>
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<p class="status"></p>
</div>
</div>
Let me know if this works for you!

Make Coin Flip Animation Two Sided

I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
jsFiddle Link
HTML Code:
<div id="coin-flip">
<button id="btnFlip">Flip the Coin</button></br></br></br>
<div id="coin-flip-cont">
<div id="coin"></div>
</div></br></br></br>
<h2 id="result"></h2>
</div>
Javascript, jQuery Code:
$(function() {
var coin = {
sideOne: "./img/image1.png",
sideTwo: "./img/image2.png"
}
$("#btnFlip").click(function() {
$("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
});
});
CSS is from Animate.css, You can view it in the Fiddle.
Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.
EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2
I feel that this can be done in a much simpler way and with the css that I already have.

First of all, change this line of your HTML code :
<button id="btnFlip">Flip the Coin</button>
To :
<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>
And then change your javascript to this code :
function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
if (document.getElementById("coin").src == coin_1){
document.getElementById("coin").src == coin_2
}
if (document.getElementById("coin").src == coin_2){
document.getElementById("coin").src == coin_1
}
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}
This javascript code flips the coin 8 times before choosing a random side to land on.

you can use animationend event to detect when the CSS animation ended.
Then you execute code to change the image source.
JQuery
$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$("#coin").removeClass('animateCoin');
setTimeout(function() {
var srcImg = $($('#coin img')[0]).attr('src');
if (srcImg === coin.heads)
$($('#coin img')[0]).attr('src',coin.tails);
else
$($('#coin img')[0]).attr('src',coin.heads);
$("#coin").addClass('animateCoin');
},50);
});
CSS :
.animateCoin {
animation: flip 1s;
}

Here is the complete code you can flip coin 2 sided solution run snippet.
To watch correct result see in full page view otherwise you can see on codepen.
You can have link of codepen too click here
jQuery(document).ready(function($){
var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];
function getSpin() {
var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
return spin;
}
$('#flip').on('click', function(){
$('#coin').removeClass();
setTimeout(function(){
$('#coin').addClass(getSpin());
}, 100);
});
});
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#coin-flip-cont {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
#coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
#coin .front, #coin .back {
position: absolute;
width: 200px;
height: 200px;
}
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-color: #3498db;
border: solid 5px gray;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-color: #2ecc71;
border: solid 5px gray;
}
#coin.animation900 {
-webkit-animation: rotate900 3s linear forwards;
animation: rotate900 3s linear forwards;
}
#coin.animation1080 {
-webkit-animation: rotate1080 3s linear forwards;
animation: rotate1080 3s linear forwards;
}
#coin.animation1260 {
-webkit-animation: rotate1260 3s linear forwards;
animation: rotate1260 3s linear forwards;
}
#coin.animation1440 {
-webkit-animation: rotate1440 3s linear forwards;
animation: rotate1440 3s linear forwards;
}
#coin.animation1620 {
-webkit-animation: rotate1620 3s linear forwards;
animation: rotate1620 3s linear forwards;
}
#coin.animation1800 {
-webkit-animation: rotate1800 3s linear forwards;
animation: rotate1800 3s linear forwards;
}
#coin.animation1980 {
-webkit-animation: rotate1980 3s linear forwards;
animation: rotate1980 3s linear forwards;
}
#coin.animation2160 {
-webkit-animation: rotate2160 3s linear forwards;
animation: rotate2160 3s linear forwards;
}
#-webkit-keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#keyframes rotate900 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
}
#-webkit-keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#keyframes rotate1080 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
}
#-webkit-keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#keyframes rotate1260 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
}
#-webkit-keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#keyframes rotate1440 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
}
#-webkit-keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#keyframes rotate1620 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
#-webkit-keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#keyframes rotate1800 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}
#-webkit-keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#keyframes rotate1980 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}
#-webkit-keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
#keyframes rotate2160 {
from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 125px;
position: inherit;
}
.front-text{
font-weight: 700 !important;
margin-top: 45%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div>
<div id="coin-flip-cont">
<div id="coin">
<div class="front"><p class="front-text">Head</p></div>
<div class="back"><p class="front-text">Tail</p></div>
</div>
</div>
<button type="button" id="flip" class="button"> Flip Coin</button>
</div>
</center>

Shivering Animation effect in html css js jquery

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.

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>

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.