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只是显示第一个图像（定义为普通样式），并且当我试图通过动画更改动画时，它不会为动画做任何事情。有什么想法可以解决这个问题吗？

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

Answer 1

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

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

动画没有

此属性无法设置动画。事实上，它可能在其他浏览器中起作用并不意味着它应该;）。

在IE11中的动画背景图像

2 个答案: