ie下keyframes动画不支持background-image的变化

如题，ie下keyframes动画不支持background-image改变的动画，用background-position会有感觉衔接不顺的问题

就先用opacity 和 position来实现(如要兼容低版本ie,就加上filter:alpha写法)。

<div class="wt-posrel wt-inlineblock ht-t26">
	   <button type="button" class="waver-red-white">
	       1
	   </button>
	   <button type="button" class="waver-red-white waver-red-white-sec">
	       2
	   </button>
</div>

@keyframes waverAnimation{
    50%{opacity: 0;}
    100%{opacity:1;}
}
.wt-posrel{
    position:relative;
}
.waver-red-white{
    padding: 0 15px 0 29px;
    height: 26px;
    line-height: 24px;
    background-color: #fff;
    background-image:url(../images/cg-icog/suo_sp_03.png);
    background-repeat: no-repeat;
    background-position: 9px 0;
    color: #e01116;
    border: 1px solid #e01116;
    border-radius: 13px;
    font-size: 15px;
    text-align: center;
}
.waver-red-white-sec{
    background-color:#e01116;
    background-position: 9px -25px;
    color: #fff;
    opacity: 1;
    animation: waverAnimation 1.3s infinite;
    position: absolute;
    left: 0;
}