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

を追加する必要があります実行中に最後に検出されたキーフレーム。遭遇した最後のキーフレームはアニメーション方向とアニメーション反復回数の値に依存します