CSS加載器不啓動動畫

Question

我無法使從這裏的CSS加載程序：在的jsfiddle http://cssdeck.com/labs/css3-loader-newtons-cradle工作，這裏是演示：http://jsfiddle.net/4eUrG/ 我看起來更在自己的源代碼，他們似乎使用一些JavaScript來使其啓動，這真的需要嗎？

它使用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 <a href="http://dribbble.com/shots/963799-Animation-Loading-gif">Jordi Verdu</a> 
</div> 

和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

它適用於IE10。

爲了使其工作在基於WebKit的瀏覽器，你需要在CSS中指定它爲transform和animation

這裏爲例：

.leftMove { 
    animation: leftBall .5s ease-in-out 0s infinite alternate; 
    -webkit-animation: leftBall .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); 
    } 
} 
@-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); 
    } 
} 

您可以點擊這裏查看fiddle以獲得完整的更新。