Question

我有一个非常类似于这个例子的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上的现代浏览器中工作得很好。

根据http://caniuse.com/transforms2d

，Css转换也应该在IE10和11开箱即用

但是在我的客户端的IE11或我虚拟机上的任何浏览器中，动画项目在边框上闪烁一点，动画也不流畅。

旋转或缩放的文字摆动。

而且，当我在我的VM上运行时，Ventilation会像地狱一样迅速升级。

CSS转换不应该通过GPU进行，因此流畅，安静，酷炫吗？！

或者可能是我的客户端的低端笔记本电脑和我的VM 都没有 GPU？

有没有办法避免这种情况，通过js polyfill平滑转换，或者只是在无法处理它的设备上禁用它？

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

0 个答案: