Html CSS3动画在chrome中的奇怪行为

我正在尝试创建一个

CSS3

动画，在背景中用图像旋转一个div

在悬停时，我想使用不同速度的相同动画

这是我用来实现它的代码：

.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中使用相同的悬停动画吗

---

这是一个与chrome相关的浏览器错误，有一个问题需要解决。所以你最好的办法就是找到一个解决这个bug的方法，你似乎已经这样做了，直到浏览器bug被修复为止，继续使用你的方法

我认为这是一个与一些报道的类似问题有关的bug，这些问题似乎都被卷入其中：它实际上是一个浏览器bug。。。我创建了一个问题来帮助跟踪此问题

.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);
  }
}