Propriété animation

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'aimerais que mon animation fasse le chemin inverse une fois arrivé à la fin, donc j'ai utilisé la valeur "alternate", mais voilà qu'à la fin de l'animation elle revient au début sans faire le chemin inverse, donc commence ci je n'avais pas ajouté cette valeur

Lorsque je rajoute la valeur "infinite" cela marche mais je ne veux pas que l'animation se renouvelle tout le temps.

voici mon code

``
code html:
mon code css s´applique sur une div html

code css:

@-webkit-keyframes monanimation{

0%{

    transform: translateX(0px);
}

50%{

    transform: translateX(150px);
}

100%{

    transform: translateX(150px) translateY(50px) rotate(30deg);
}

}

div{

width: 200px;
height: 150px;
background-color: green;
margin: 300px

}

div:hover{

animation: monanimation 10s linear alternate;
-webkit-animation: monanimation 10s linear alternate;
-moz-animation: monanimation 10s linear alternate;

}

``