我正在尝试为按钮应用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仅显示第一张图像(定义为通用样式),并且当我尝试通过动画进行更改时,对动画没有任何作用。
有解决问题的想法吗?

附言更改背景位置的单个图像不是很好的解决方案,因为它看起来不适合动画。

最佳答案

像添加webkit一样,添加其他浏览器前缀@-ms-keyframes@-moz-keyframes@-o-keyframes,以支持IE11,Opera和较旧的FireFoxes,因为CSS动画尚无标准实现。

关于css - IE11中的动画背景图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20844825/

10-09 06:15
查看更多