@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;/*前后循環(huán)*/
}

這樣就可以實現(xiàn)一個簡單的逐幀動畫了，需要注意的就是圖片的寬度是有限制的過大的圖片不適合做這樣的動畫。