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

FIDDLE

Answer 1

这是一个与 chrome 相关的浏览器错误，已经提交了一个问题来修复它。因此，最好的办法是找到解决该错误的方法，您似乎已经这样做了，直到浏览器错误得到修复，然后继续使用您的解决方法。