CSS loader does not start animating - css

Question

I am unable to make the css loader from here: http://cssdeck.com/labs/css3-loader-newtons-cradle work in jsfiddle, here is the demo: http://jsfiddle.net/4eUrG/
I looked more at their source code and they seem to use some javascript to make it start, is that really needed?
It uses the html:
<div class="cord leftMove">
<div class="ball"></div>
</div>
<div class="cord">
<div class="ball"></div>
</div>
<div class="cord">
<div class="ball"></div>
</div>
<div class="cord">
<div class="ball"></div>
</div>
<div class="cord">
<div class="ball"></div>
</div>
<div class="cord">
<div class="ball"></div>
</div>
<div class="cord rightMove">
<div class="ball" id="first"></div>
</div>
<div class="shadows">
<div class="leftShadow"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="rightShadow"></div>
</div>
<br><br>
Inspired by Jordi Verdu
</div>
and the CSS:
#import url(http://fonts.googleapis.com/css?family=Quicksand:700);
body{
font-family: 'Quicksand', sans-serif;
margin:0;
background: #ede9de;
color:#666;
}
a, a:visited, a:hover{
text-decoration:none;
color:#db5989;
}
a:hover{
color:#a05772;
}
.container {
height: 150px;
left: 50%;
margin: -75px 0 0 -53px;
position: absolute;
top: 50%;
width: 106px;
text-align:center;
}
.cord{
padding-top:100px;
width:15px;
transform: rotate(0deg);
transform-origin:50% 50%;
float:left;
}
.ball{
background:#333;
width:15px;
height:15px;
float:left;
border-radius:50%;
}
.shadows{
clear:left;
padding-top:20px;
margin-left:-2px;
}
.shadows div{
float:left;
margin-left: 2px;
width:13px;
height:3px;
border-radius:50%;
box-shadow: 0px 0px 3px rgba(204, 204, 204, 0.3);
background: rgba(204, 204, 204, 0.3);
}
.leftMove{
animation: leftBall .5s ease-in-out 0s infinite alternate;
}
.rightMove{
animation: rightBall .5s ease-in-out 0s infinite alternate;
}
.leftShadow{
animation: leftShadowN .5s ease-in-out 0s infinite alternate;
}
.rightShadow{
animation: rightShadowN .5s ease-in-out 0s infinite alternate;
}
#keyframes leftBall
{
0% {
transform: rotate(0deg) translateY(0px);
}
/*this pauses the ball at the begining*/
50% {
transform: rotate(0deg) translateY(0px);
}
100% {
transform: rotate(50deg) translateY(-20px);
}
}
#keyframes rightBall
{
0% {
transform: rotate(-50deg) translateY(-20px);
}
/*this pauses the ball at the begining*/
50% {
transform: rotate(0deg) translateY(0px);
}
100% {
transform: rotate(0deg) translateY(0px)
translateX(0px);
}
}
#keyframes leftShadowN
{
0% {
transform: translateX(0px);
}
/*this pauses the ball at the begining*/
50% {
transform: translateX(0px);
}
100% {
transform: translateX(-25px);
}
}
#keyframes rightShadowN
{
0% {
transform: translateX(25px);
}
/*this pauses the ball at the begining*/
50% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
/*colors*/
.cord:nth-of-type(1) .ball{
background:#335672;
}
.cord:nth-of-type(2) .ball{
background:#35506b;
}
.cord:nth-of-type(3) .ball{
background:#5f4e60;
}
.cord:nth-of-type(4) .ball{
background:#924a4e;
}
.cord:nth-of-type(5) .ball{
background:#a73a33;
}
.cord:nth-of-type(6) .ball{
background:#cf4231;
}
.cord:nth-of-type(7) .ball{
background:#df3e2a;
}

Answer 1

It works on IE10.
In order to make it works in webkit based browser, you need to specify it in the css for transform and animation
Here for exemple :
.leftMove {
animation: leftBall .5s ease-in-out 0s infinite alternate;
-webkit-animation: leftBall .5s ease-in-out 0s infinite alternate;
}
And here too :
#keyframes leftBall {
0% {
transform: rotate(0deg) translateY(0px);
}
/*this pauses the ball at the begining*/
50% {
transform: rotate(0deg) translateY(0px);
}
100% {
transform: rotate(50deg) translateY(-20px);
}
}
#-webkit-keyframes leftBall {
0% {
-webkit-transform: rotate(0deg) translateY(0px);
}
/*this pauses the ball at the begining*/
50% {
-webkit-transform: rotate(0deg) translateY(0px);
}
100% {
-webkit-transform: rotate(50deg) translateY(-20px);
}
}
You can check this fiddle for a complete update that works.