CSS - 动画移动对象不会停留在停止的位置

Question

所以我正在摆弄动画，我已经弄清了一个问题，在我移动了我的物体之后它回到了它的初始位置。有没有办法让它保持最终状态？

我有一些CSS：

.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

您需要添加animation-fill-mode: forwards;

MDN Reference

  

目标将保留执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于animation-direction和animation-iteration-count

的值