CSS Animations on Browser Source getting Reset [Solved]

[Nen]

I created an Animation of a browser source using CSS to make an asset slide in and out. However when it slides out and completes the animation, it all resets and the asset just resets back to base. Is there something I'm missing here?

/*-------------------------Animation--------------------------------------*/
.messagesListView > div:nth-last-child(2){
position: relative;
animation-name: slideInOut;
animation-duration: 25s;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(.75,-0.5,0,1.75);

}


@-webkit-keyframes slideInOut{
0% {transform: translateX(100%)}
1% {transform: translateX(-2%)}
1.5% {transform:translateX(2%)}
2% {transform: translateX(0%)}
98.5% {transform: translateX(0%)}
99% {transform:translateX(2%)}
99.5% {transform:translateX(-2%)}
100% {transform:translateX(-100%)}
}

 

[Nen]

Solved it myself, in the top CSS I needed to add

animation-fill-mode: forwards; /* Keeps the element at the last frame */