Chrome中的CSS3动画奇怪行为

Question

我正在尝试创建一个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>

但是令我惊讶的是，悬停动画仅在firefox起作用，而在chrome不起作用。 为了临时修复，我为悬停使用不同的名称创建了另一个动画，并且效果很好：

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

小提琴

Answer 1

这是与chrome有关的浏览器错误，已提出修复问题。 因此，最好的选择是找到似乎已解决的错误的解决方法，直到修复浏览器错误，然后继续使用您的解决方法。