为什么css转换在一些Windows机器上是粗糙的和闪烁的？

我有一个与这个例子非常相似的CSS转换

整个动画通过css3变换进行

.item {
    .animation(item 10s ease-in-out infinite);
}

@-webkit-keyframes item {
  0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
  50%{ -webkit-transform:translateY(-20px) rotate(8deg); }
}
@-moz-keyframes item {
  0%,100%{ -moz-transform:translateY(0) rotate(-6deg);}
  50%{ -moz-transform:translateY(-20px) rotate(8deg); }
}
@-o-keyframes item {
  0%,100%{ -o-transform:translateY(0) rotate(-6deg);}
  50%{ -o-transform:translateY(-20px) rotate(8deg); }
}
@keyframes item {
  0%,100%{ transform:translateY(0) rotate(-6deg);}
  50%{ transform:translateY(-20px) rotate(8deg); }
}

这在我的mac电脑上的现代浏览器中运行良好且流畅

Css转换也应该在IE10和11中工作，根据

但是在我客户的IE11或虚拟机上的任何浏览器中，动画项目在边界上闪烁一点，动画并不平滑

旋转或缩放文本抖动

而且，当运行我的虚拟机时，通风设备会像地狱一样立即启动

CSS转换不应该通过GPU，从而变得平滑、安静和酷吗

或者我的客户的低端笔记本电脑和虚拟机都没有GPU

---

有没有办法避免这种情况，通过js polyfill平滑转换，或者干脆在不能很好地处理转换的设备上禁用转换？

在我的桌面计算机上的IE 11中可以很好地工作。我认为这是IE实现差和目标计算机上缺乏适当的加速硬件的某种组合。许多低端笔记本电脑都有非常简化的GPU，IE可能没有使用，或者可能没有足够的能力来处理这个问题。我不知道你的虚拟机。而且没有办法从浏览器嗅探硬件，是吗？我看到了，但这也没什么帮助。关联的示例与我自己的示例一样粗糙（大部分是转换后的文本）。使用特征检测来嗅探此类内容有点困难。我见过一些情况，使用3d操作（即使你不需要它）会导致浏览器使用GPU，而不是其他方式，但我不知道这是否有帮助。你能用一个动画gif替换整个东西吗？是的，这就是上面链接中的例子。但它更倾向于css转换，而不是转换。gif。。。那为什么不闪一下呢哈哈。。。不，也许这是一个非常简单的想法。不过，我也考虑先尝试raphael.js作为替代方案。