Freeze a CSS animation

Let's assumet that you created a container:

html
<div class = 'Slide'>I'll move to the right.</div>

If you want to move this container to the right, you'll write in CSS something like:

css
.Slide{
    animation: moveRight 1s linear;
}

@keyframes moveRight {
    0%   { transform: translateX(0px); }
    100% { transform: translateX(2px); }
}

If you want to prevent transform going back to it's original position after the animation is over, you should use animation-fill-mode: forwards:

css
.Slide{
    animation: moveRight 1s linear forwards;
}

@keyframes moveRight {
    0%   { transform: translateX(0px); }
    100% { transform: translateX(2px); }
}

This will freeze a CSS animation in the last frame.