アニメーションの終わりに中央揃えにするテキストを設定する方法は？

Question

このコードでは、テキスト "Hello World！"のアニメーションを再生します。アニメーションの開始時に、テキストの色は赤です。次に25％で青となり、が50％になると、中心に合わせてになります。

アニメーションが終了すると、テキストは開始位置に戻され、中央に揃えられません。

だから、ここに私のコードは次のとおりです。

p { 
animation-name:sample; 
animation-duration:3s; 
} 

@keyframes sample { 
0% {color:red;} 
50% {color:blue;} 
75% {text-align:center;} 
} 

そして、問題は私のコードでいるのですか？

Answer 1

あなたはforwardsにanimation-fill-modeを設定する必要があります。https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

forwards ターゲットは、実行中に発生した最後のキーフレームで設定された計算された値を保持します。最後のキーフレームアニメーション方向とアニメーション反復カウントの値によって異なります。

p { 
 
animation-name:sample; 
 
animation-duration:3s; 
 
animation-fill-mode: forwards ; 
 
} 
 

 
@keyframes sample { 
 
0% {color:red;} 
 
50% {color:blue;} 
 
75%, 100% {text-align:center;} 
 
}

<p>text to colorize then center</p>

text-alignはは、それが別の値から切り替わり、アニメーションすることはできません。分割可能な値のみをビットごとにアニメートすることができます。

Answer 2

アニメーションの最後は100％である。

100% { 

    text-align: center; 

} 

、あなたはあなたにも100％を追加して、アニメーションの方向を言及することができ、再び

Answer 3

始め、それを避けるためにanimation-fill-mode: forwards;を言う必要があります以下のように転送します。

p { 
    animation: sample 3s forwards; 
    } 

    @keyframes sample { 
    0% {color:red;} 
    50% {color:blue;} 
    75% {text-align:center;} 
    100% {text-align:center;} 
    }