webkit css無盡的旋轉動畫無法正常工作。爲什麼？

Question

我想旋轉空設置的圖像，但我的代碼無法正常工作。 如果我在自己的電腦上運行，圖片會變黑並旋轉。 問題是什麼？

@-webkit-keyframes rotate { 
     from{ 
      -webkit-transform: rotate(0deg); 
     } 
     to{ 
      -webkit-transform: rotate(360deg); 
     } 
    } 

    #refresh { 
     width:48px; 
     height:48px; 
     position:fixed; 
     top:150px; 
     right:150px; 
     background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif); 
     -webkit-animation: rotate 2s linear infinite; 
    } 

<div id="refresh" ></div> 

http://jsfiddle.net/Pg2pj/

Answer 1

這似乎工作得很好。這裏：http://cssdesk.com/6VyMM

Answer 2

我更新了你的FIDDLE，看看。

希望這可以幫助你

---

你也可以在你的動畫，而不是from和to

CSS使用百分比：

@-webkit-keyframes rotate { 
    0%{-webkit-transform: rotate(0deg);} 
    100%{-webkit-transform: rotate(360deg);} 
} 

#refresh { 
    width: 48px; 
    height: 48px; 
    top: 0px; 
    right: 0px; 
    background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat; 
    background-size: 100% 100%; 
    -webkit-animation: rotate 2s linear 0s infinite; 
} 

記住跨瀏覽器兼容性：

@-webkit-keyframes rotate { 
    0% { } 
    100% { } 
} 
@-moz-keyframes rotate { 
    0% { } 
    100% { } 
} 
@-o-keyframes rotate { 
    0% { } 
    100% { } 
} 
@keyframes rotate { 
    0% { } 
    100% { } 
} 

---

#refresh { 
    -webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */ 
    -moz-animation: rotate 2s linear 0s infinite /* Fx 5+ */ 
    -o-animation:  rotate 2s linear 0s infinite /* Opera 12+ */ 
    animation:   rotate 2s linear 0s infinite /* IE 10+ */ 
}