Internet Explorer和CSS在关键帧上转换比例值

Question

我已经构建了这个非常棒的css加载器，除了在Internet Explorer中一切正常。出于某种原因，IE感觉好像需要不断摇晃。当它归结为它时，我正在做的是一个简单的keframe动画，如下所示：

@keyframes loading
  0%
    transform: scale(1)
  50%
    transform: scale(1.2)
  100%
    transform: scale(1)

这是我的装载机CodePen：http://codepen.io/MrGrigri/pen/zxWQdb

此外，这是与之关联的博客：http://codepen.io/MrGrigri/blog/responsive-loader/

在所有其他浏览器中，它的工作方式就像一个冠军...而不是IE。

我正在Windows 8.1上的IE 11.0.16中测试它

感谢您的帮助

Answer 1

我在IE 11中遇到同样的问题，我可以意识到，如果我减少动画的时间可以工作（例如0.3s）。但这对我来说不是一个解决方案。

当我在阅读How to fix shaking CSS transitions in Firefox时，我找到了一个解决方案（对于Firefox），我认为这可能与IE的概念相同。

这个想法是在制作比例时旋转（尽可能最小）div或图像。就像这样：

@keyframes loading
  0%
    transform: scale(1);
  50%
    transform: scale(1.2) rotate(0.02deg);
  100%
    transform: scale(1);

我制作了这个技巧并在IE 11中运行。