Arréter une animation seulement aux keyframe

Bonjour.

Je suis actuellement sur un projet pour montrer une partie d'echec codée en html/css. J'aimerais que l'animation s'arrète en hover (ça c'est fait) mais qu'elle s'arrête seulement quand elle arrive sur une keyframe (pour ne pas arrêter l'animation en plein milieu.

Plusieurs div son animées et peuvent toutes être appelées par la même classe, mais aussi séparément.
Les div ne sont pas animées ensemble mais les unes après les autres.

Pour vous donner une idée voici un bout de mon css :
/**Position toure**/
.RookWK{
position:absolute;
top:718px;
left:718px;
z-index:10;
-webkit-animation:animationRookWK 20s;
}
/**Animations tour**/
@-webkit-keyframes animationRookWK{
65% {transform:translate(0,0px);}
67.5% {transform:translate(-400px,0);}
80% {transform:translate(-400px,0);}
82.5% {transform:translate(-400px,-700px);}
99% {transform:translate(-400px,-700px);}
}
/**arret des animation**/
.board:hover .Piece{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}

Donc en hover la piece s'arrete en plein milieu de son déplacement et j'aimerais soit qu'elle finisse son déplacement soit qu'elle revienne ou elle etait et que les animations repartent ensuite du keyframe d'avant (Exemple, je passe en hover a 81%, l'animation reprendra a 80%)


Merci si vous avez des solutions ou des idées.
je ne suis pas contre le JS je suis juste très ... débutant .