Animazione CSS3 - solo una volta

[ylio82]

Salve a tutti,

Sto realizzando un'animazione di un div. Voglio creare un movimento da sinistra a destra di 10 secondi.
Uso questo codice:

    @-webkit-keyframes 'pulse' {from {  } 
 to {  -webkit-transform: translate(1650px,-500px);}}

.pulsedbox {position: absolute;top: 300px; left: -150px;  width: 100px; height: 100px; background-color: red;-webkit-animation-name: pulse;-webkit-animation-duration: 10s;
}

<div style="background-color: orange; width: 1200px; height: 500px; position: relative">        <div class="pulsedbox">                    </div>    </div> 

Succede questo:
L'animazione funziona correttamente, ma trascorsi i 10 secondi, il div si posiziona di nuovo nel punto di partenza. Come posso fare affinché il div rimanga nella sua posizione finale?

grazie mille.

Saluti

[fcaldera]

c'è la documentazione di MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

animation-fill-mode: forwards;

...
forwards
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:

[ylio82]

c'è la documentazione di MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

animation-fill-mode: forwards;

Grazie mille, era proprio quello che stavo cercando!!!