chrome中的CSS3动画奇怪行为答案

【问题标题】：CSS3 animation strange behaviour in chromechrome中的CSS3动画奇怪行为
【发布时间】：2014-10-31 20:14:10
【问题描述】：

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

【问题讨论】：

我认为这是一个与几个报告的类似问题相关的错误，这些问题似乎被纳入：code.google.com/p/chromium/issues/detail?id=422909
这真的是一个浏览器错误...我创建了一个问题来帮助跟踪这个code.google.com/p/chromium/issues/detail?id=429138

标签： html css css-animations

【解决方案1】：

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

【讨论】：