CSS精灵动画看起来有点生涩

Question

我有一个25帧的精灵，总宽度为3427px，css代码如下：

http://codepen.io/AlexanderWeb00/pen/aBKVaR

.test {
  width: 138px;
  height: 224px;
  background: url(/img/flame.png) no-repeat;
  animation: flame 2s steps(25) infinite;
  animation-delay: .5s;
}

@keyframes flame {
  100% {
    background-position: -3427px 0;
  }
}

每一帧包括每侧1px空间使其宽度为138px。

我应该添加更多帧，还是有什么东西可以添加CSS？