html - 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.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 中工作。