帧动画

1、设计给过来的素材是一张一张的图片，为了防止丢帧，就在

www.toptal.com/developers/… 这里生成了一张精灵图。

帧动画可以选择js/css3实现，不过css3性能会更好

2、代码如下

<header>
    <h1 class="top-title"></h1>
    <div class="sprite1-wp">
        <div class="sprite1"></div>
    </div>
</header>

.sprite1-wp{
  width:remit(240);
  height:remit(240);
  overflow: hidden;
  position: absolute;
  bottom: remit(240);
  left: remit(156);
}

.sprite1{
  width:remit(3600);
  height:remit(240);
  will-change: transform;
  background-image: url('../images/sprites1.png');
  background-size: remit(3600 240);
  animation: frame1 1s  steps(1) both infinite;
}


@keyframes frame1 {
	0% {transform: translate3d(remit(-10),0,0);}
	7% {transform: translate3d(remit(-250),0,0);}
	14% {transform: translate3d(remit(-490),0,0);}
	21% {transform: translate3d(remit(-730),0,0);}
	28% {transform: translate3d(remit(-970),0,0);}
	35% {transform: translate3d(remit(-1210),0,0);}
	42% {transform: translate3d(remit(-1450),0,0);}
	49% {transform: translate3d(remit(-1690),0,0);}
	56% {transform: translate3d(remit(-1930),0,0);}
	63% {transform: translate3d(remit(-2170),0,0);}
	70% {transform: translate3d(remit(-2410),0,0);}
	77% {transform: translate3d(remit(-2650),0,0);}
  84% {transform: translate3d(remit(-2890),0,0);}
	91% {transform: translate3d(remit(-3130),0,0);}
  100% {transform: translate3d(remit(-3370),0,0);}
}

附： blog.csdn.net/u013778905/…