CSSのキーフレームアニメーションを段階的に進行させる

これまでは、

@-webkit-keyframes step {
  0%           {
      left: 0px;
    }
    19.99% {
        left: 0%;
    }
    20%       {
        left: 75px;
    }
    39.99% {
        left: 75px;
    }
    40%       {
        left: 150px;
    }
    59.99% {
        left: 150px;
    }
    60%       {
        left: 225px;
    }
    79.99% {
        left: 225px;
    }
    80%       {
        left: 300px;
    }
    99.99% {
        left: 300px;
    }
    100%     {
      left: 375px;
    }
}

という感じでなんとか再現していましたが、stepsで指定できることを教えてもらいました。

@-webkit-keyframes anim {
  0%      {
      left: 0px;
    }
  100% {
      left: 375px;
    }
}

と、0% と 100% の値だけ設定しておき、

-webkit-animation: anim 2s steps(5, end) forwards;

という感じで実行時にstepsを設定すればOKです。お手軽ですね。

DEMO