chrome中的CSS3動畫奇怪的行爲

我想創建一個CSS3動畫，它在背景中旋轉div的圖像。chrome中的CSS3動畫奇怪的行爲

懸停時，我想用不同的速度使用相同的動畫。

這是我使用的是實現它的代碼：

.rocket{ 
    background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center; 
    width: 200px; 
    height: 200px; 
    -webkit-animation : spin 1500ms linear infinite; 
      animation : spin 1500ms linear infinite; 
} 



.rocket:hover{ 
    -webkit-animation : spin 500ms linear infinite; 
      animation : spin 500ms linear infinite; 
} 

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

@keyframes spin{ 
    from{ 
    -webkit-transform: rotate(0deg); 
      transform: rotate(0deg); 
    } 
    to{ 
    -webkit-transform: rotate(360deg); 
      transform: rotate(360deg); 
    } 
<div class="rocket"></div>

但讓我吃驚的懸停動畫作品在chrome只有在firefox不能及的。對於一個臨時的解決辦法，我創建一個更加動畫有不同的名稱懸停，它工作正常：

.rocket{ 
    background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center; 
    width: 200px; 
    height: 200px; 
    -webkit-animation : spin 1500ms linear infinite; 
      animation : spin 1500ms linear infinite; 
} 

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

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

.rocket:hover{ 
    -webkit-animation : spin2 500ms linear infinite; 
      animation : spin2 500ms linear infinite; 
} 

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

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

你能告訴我爲什麼發生這種情況，我怎麼能在Chrome中使用同樣的動畫與懸停？

FIDDLE

來源

2014-10-31 tejas_spy007

我認爲這是一個與幾個類似的問題相關的錯誤，這些問題似乎已被匯入：https://code.google.com/p/chromium/issues/detail?id=422909 – jme11 2014-10-31 10:41:35

這實際上是一個瀏覽器錯誤.. 。我創建了一個問題來幫助跟蹤此https://code.google.com/p/chromium/issues/detail?id=429138 – rafaelcastrocouto 2014-10-31 10:51:23