css - 無限 CSS アニメーションを 1 回限りの CSS アニメーションにチェーンするにはどうすればよいですか?

Question

誰かがトップを始めたように回転する要素をアニメーション化しようとしています。最初は、要素は時計回りに無限に回転するように移行する前に、反時計回りに回転します。

私が持っている一般的な CSS は次のとおりです。

div {
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

@-keyframes PreRotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(-360deg);}
}

@-keyframes Rotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(360deg);}
}

私が期待することは、要素が反時計回りに 800 ミリ秒 1 回回転し (PreRotate アニメーション)、800 ミリ秒後に無限に時計回りに回転することです (回転アニメーション)。http://jsfiddle.net/Fu5V2/6/の例から、時計回りの回転ごとに、回転が「しゃっくり」しているように見えます。

なぜこれが起こっているのか、そしてどのようにして望ましい効果が得られるのかを誰かが説明できますか? 独立したアニメーションは正しいように見えますが、それらを連鎖させると何かが台無しになります。