css - さまざまなポイントでの CSS3 アニメーションの開始

Question

CSS3 を使用して画面上で常に div を移動するためのコードがいくつかあります。私がやりたいことは、CSS で記述したアニメーションをアニメーションのさまざまなポイント (つまり、20%) で最初のアニメーション サイクル中に開始することです。その後、各サイクルを 0% で開始します。以下の JSFiddle さん、ご協力ありがとうございます。

HTML:

<div class="x1">

</div>

CSS:

.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
}

@keyframes animato {
    0% { right: -25%; }
    20% { right: 0%; }
    40% { right: 25%; }
    60% { right: 50%; }
    80% { right: 75%; }
    100% { right: 100%; }
}

http://jsfiddle.net/ER287/

たとえば、20% マークからどのように開始animatoしますか?