Windows 8.1应用程序中的CSS动画无法正常工作

Question

在我们开始将它升级到Windows 8.1之前，我正在处理的应用程序中有一个CSS动画。这是一个相对简单的旋转变换，旨在使图像旋转。下面是我们的CSS，看起来有效，并且在IE11中运行测试页面运行良好。

.spinner img {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Answer 1

事实证明，动画声明本身没有任何问题。我们刚刚在媒体查询中包含了keyframes定义。显然，即使媒体查询有效且正确应用，IE11和Windows 8.1都不会渲染动画。

长话短说，在媒体查询之外移动keyframes定义解决了这个问题。