css3帧动画无缝衔接会闪一下,css3动画，为什么下面的两种写法，每帧动画之间会有闪动，正确的该怎么写啊...

写法一：总共32帧 用的是steps(32)

Document

.m-component-loading{

width: 400px; height: 350px;

margin: 20px auto;

background:url(images/loadingimg.png) no-repeat 0 0;

-webkit-animation: charector 1000ms 0s steps(32) infinite;

animation: charector 1000ms 0s steps(32) infinite;

}

@-webkit-keyframes charector{

100%{background-position: 0 -11200px;}

}

keyframes charector{

100%{background-position: 0 -11200px;}

}

写法二：用的是step-start

Document

.m-component-loading{

width: 400px; height: 350px;

margin: 20px auto;

background:url(images/loadingimg.png) no-repeat 0 0;

-webkit-animation: charector 1000ms 0s step-start infinite;

animation: charector 1000ms 0s step-start infinite;

}

@-webkit-keyframes charector{

0%{background-position:0 0}3.125%{background-position:0 -350px}6.26%{background-position:0 -700px}9.375%{background-position:0 -1050px} 12.5%{background-position:0 -1400px}    15.625%{background-position:0 -1750px}18.75%{background-position:0 -2100px} 21.875%{background-position:0 -2450px}  25%{background-position:0 -2800px}28.125%{background-position:0 -3150px} 31.25%{background-position:0 -3500px}   34.375%{background-position:0 -3850px}37.5%{background-position:0 -4200px} 40.625%{background-position:0 -4550px}  43.75%{background-position:0 -4900px}46.875%{background-position:0 -5250px} 50%{background-position:0 -5600px}      53.125%{background-position:0 -5950px}56.25%{background-position:0 -6300px} 59.375%{background-position:0 -6650px}  62.5%{background-position:0 -7000px}65.625%{background-position:0 -7350px} 68.75%{background-position:0 -7700px}   71.875%{background-position:0 -8050px}75%{background-position:0 -8400px} 78.125%{background-position:0 -8750px}  81.25%{background-position:0 -9100px}84.375%{background-position:0 -9450px} 87.5%{background-position:0 -9800px}    90.625%{background-position:0 -10150px}93.75%{background-position:0 -10500px}96.875%{background-position:0 -10850px} 100%{background-position:0 -11200px;}

}