animation动画中的steps

首先设置动画的关键帧

@keyframes hd {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(330px);
  }
}

1.设置steps为start，可以看到最开始是没有动画效果的，到第一步后开始有变化。这里理解为：在0-100%会三次步进动画，但是第一次的步进体现在了第一步结束后。

div:nth-child(1){
	// 第二个步骤发生改变
	animation: hd 2s steps(3, start) infinite;
}

w3c官网指出：动画在每个周期的起点发生阶跃（即图中的空心圆 → 实心圆）。在这里，由于动画的第一次阶跃是在第一阶段的起点处（1s），所以我们看到的动画的初始状态其实已经是 1/3 的状态，因此我们看到的动画的过程为 1/3 → 2/3 → 1 。

2.设置steps为end，从0状态动画开始过渡。从第一步就开始变化。

 &:nth-child(5):before {
    // 第一个步骤发生改变
    animation: hd 2s steps(3, end) infinite ;
  }

w3c官网指出：teps(3, end)也是将动画分为三段，但跳跃点为end，动画在每个周期的终点发生阶跃（即图中的空心圆 → 实心圆）。虽然动画的状态最终会到达100%，但是动画已经结束，所以100%的状态是看不到的，因此我们最终看到的动画的过程是0 → 1/3 → 2/3。

最后呢，写一个火苗效果,使用下图

@keyframes fire {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -16320px 0;
  }
}

#wrap {
  background: #e2e2e2;
}

.fire {
  width: 340px;
  height: 200px;
  background: url('../img/pc/fire.png') no-repeat;
  background-size: 16320px 200px;
  animation: fire 1s steps(48) infinite;
  overflow: hidden;
}

参考mdn生动描述：developer.mozilla.org/en-US/docs/…