CSS - Animated moving object won't stay where it stopped

Question

So I'm fiddling with animations, and I've stumpled upon a problem, after I've moved my object it return to it's initial position. Is there a way to keep it at its final position?

Some of the CSS I've got:

.spinner-word span {
    font-size: 4vw;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    animation: move .5s linear;
    animation-delay: 1.5s;
}

@keyframes move {
    0% {
        left: -8vw;
    }
    100% {
        left: 0px;
    }
}

My fiddle

Answer 1

You need to add animation-fill-mode: forwards;

MDN Reference

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