css3动画响应式适配问题

在做css3动画的时候，我们经常遇到需要适配移动端和pc端的问题，比如UI给了一个两倍的缓动图片序列，因为在移动端上面，我们需要把图片序列缩小两倍来展示，以达到高清图的效果

一般我们的做法会是下面这样

.rebind-binding {   
   height: 28px; 
   width: 176px; 
   background-image: url('../../images/autoRebind/rebind-binding.png'); 
   background-size: 50%;    
   background-repeat: no-repeat;    
   -webkit-animation: binding-status 1500ms steps(27, start) infinite;   
   -moz-animation: binding-status 1500ms steps(27, start) infinite;   
   -o-animation: binding-status 1500ms steps(27, start) infinite;    
   animation: binding-status 1500ms steps(27, start) infinite;
}
@keyframes binding-status {   
 100% {        background-position: 0 -756px;    }
}
@-webkit-keyframes binding-status {    
100% {        background-position: 0 -756px;    }
}
@-o-keyframes binding-status {    
100% {        background-position: 0 -756px;    }
}
@-moz-keyframes binding-status {    
100% {        background-position: 0 -756px;    }
}

这里用了css3动画的step函数来构建动画帧

step(n, start/end);/*其中n代表了这个动画序列总共有多少帧*/

这样我们只要在keyframes里面声明100%之后的状态，css3会自动帮我们计算出每一帧的变化，相对于直接自己写每一帧的变化要简单的多

/*没用step函数的话，就需要自己声明每一帧的变化*/
@keyframes binding-status {   
0%{
 background-position: 0 0px; 
}
4%{
 background-position: 0 -13px; 
}
8%{
 background-position: 0 -26px; 
}
......
 100% {        background-position: 0 -756px;    }
}

回到正题，使用background-size:50%；也是可以将我们的动画图片缩小1倍，但是会发现，我们的动画会有很大的抖动，不管怎么调每一帧的图片位置，都不能调到正常的动画效果的样子，这时要是我们将background-size去掉，直接观察不缩小图片的情况下，动画的效果是正常的

所以真正的bug在于我们不能使用background-size简单粗暴的将动画缩小，应该换一种方式，在一番调试之后，发现用css3的scale缩放功能，直接将图片缩小一倍，但是容器的大小是不会发生变化的，这样动画就回归了正轨，不在出现抖动效果

.rebind-binding {   
 height: 28px;    
width: 176px;    
background-image: url('../../images/autoRebind/rebind-binding.png');    background-repeat: no-repeat;    
transform: scale(0.5,0.5);    
-webkit-transform: scale(0.5,0.5);    
-moz-transform: scale(0.5,0.5);   
 -o-transform: scale(0.5,0.5);    
-webkit-animation: binding-status 1500ms steps(27, start) infinite;    
-moz-animation: binding-status 1500ms steps(27, start) infinite;   
 -o-animation: binding-status 1500ms steps(27, start) infinite;   
 animation: binding-status 1500ms steps(27, start) infinite;
}
@keyframes binding-status {    
100% {        background-position: 0 -756px;    }
}
@-webkit-keyframes binding-status {   
 100% {        background-position: 0 -756px;    }
}
@-o-keyframes binding-status {   
 100% {        background-position: 0 -756px;    }
}
@-moz-keyframes binding-status {    
100% {        background-position: 0 -756px;    }
}