IE11中的动画背景图像

Question

我正在尝试为按钮应用css3动画：

#mobile-nav-button {
  background-image: url('/images/btn_menu_mobile.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 40px; height: 36px;
  float: left;
  animation: mobile-nav-cue ease-in-out 3s;
  -webkit-animation: mobile-nav-cue ease-in-out 3s;
}
@keyframes mobile-nav-cue {
  from { background-image: url('/images/btn_menu_mobile_cue.png');  }
  to { background-image: url('/images/btn_menu_mobile_active.png'); }
}
@-webkit-keyframes mobile-nav-cue {
  from { background-image: url('/images/btn_menu_mobile_cue.png');  }
  to { background-image: url('/images/btn_menu_mobile_active.png'); }
}

此代码在IE11以外的所有相关浏览器中均能正常运行。 IE11仅显示第一张图像（定义为通用样式），并且当我尝试通过动画更改它时，对动画没有任何作用。 有解决问题的想法吗？

具有变化的背景位置的PS单个图像不是很好的解决方案，因为它看起来不适合动画。

Answer 1

添加其他浏览器前缀@-ms-keyframes ， @-moz-keyframes和@-o-keyframes ，就像您使用webkit来支持IE11，Opera和较旧的FireFoxes一样，因为CSS动画还没有标准实现

Answer 2

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image

可动画否

此属性不能设置动画。 事实上，它可以在其他浏览器中运行并不意味着它应该;）。