如题,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;
}