我正在尝试为按钮应用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/