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

Question

我构建了这个非常棒的 css 加载器，除了在 Internet Explorer 中，一切都运行良好。出于某种原因，IE 感觉好像需要不断摇晃。归根结底，我所做的只是一个像这样的简单的 keframe 动画：

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

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

我正在 Windows 8.1

上的 IE 版本 11.0.16 中对其进行测试

感谢帮助

Answer 1

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

当我阅读 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 中工作。

Internet Explorer and CSS transform value of scale on keyframes