Compréhension sur une animation

Bonjour à tous.
Je ne trouve pas mon erreur sur cette animation. Certainement une incompréhension de ma part, mais je souhaiterais que l'animation s'arrête à 250px à la fin de l'animation.
Mais juste après 100%, elle se recale brusquement et complètement à gauche (left:0px).
Voir codepen: http://codepen.io/anon/pen/kHJux/

Je n'ai pas mis -webkit- pour simplifier.

Code CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 #page { width:600px; height:80px; margin:10px auto; border:1px solid black; } .animated2 { width:60px; height:40px; background:red; color:#ffffff; position:relative; font-weight:bold; font-size:20px; margin:10px; padding:10px; border-radius:5px; animation:animated2; animation-duration:5s; animation-iteration-count:1; animation-direction:normal; } @keyframes animated2 { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:400px;} 100% {transform: rotate(-360deg);left:250px;} }
code html:
Code:

1 2 3 <div id="page"> <div class="animated2">CSS3<br><span style="font-size:10px;">Animation</span></div> </div>
Merci aux passionnés de leur lumière.