@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }

}

.layout{
    background: url(../images/222.png) no-repeat 0 0;

      animation: heart-burst 15s steps(67) both;
    background-size: 6800%;width:438px ;
    animation-play-state: running;/*前后循环*/
}

这样就可以实现一个简单的逐帧动画了，需要注意的就是图片的宽度是有限制的过大的图片不适合做这样的动画。