幀動畫

一、設計給過來的素材是一張一張的圖片，爲了防止丟幀，就在

www.toptal.com/developers/… 這裏生成了一張精靈圖。

幀動畫能夠選擇js/css3實現，不過css3性能會更好

二、代碼以下

<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/…