CSSでパラパラ漫画のように色を変更する方法

CSSでアニメーションをつけるとき、大抵滑らかな変化をつけると思いますが、パラパラ漫画のように、次の変化へ滑らかな変化が入らないときは、step-endが便利です。

<div id="hoge"></div>

#hoge{
    width:100px;
    height:100px;
    background-color: #da8f87;
    animation: parapara 12s step-end 0s infinite;
}

@keyframes parapara {
    8% { background-color: #aecece; }
   16% { background-color: #cbdcca; }
   25% { background-color: #d8a2c2; }
   33% { background-color: #6894ca; }
   41% { background-color: #6cabad; }
   50% { background-color: #f7b9ad; }
   58% { background-color: #e66081; }
   66% { background-color: #9598ba; }
   75% { background-color: #edd248; }
   83% { background-color: #f8c08a; }
   91% { background-color: #8ba7b3; }
}

背景色がパラパラと変化するdivタグができました。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/timing-function