Wie wird der auszurichtende Text am Ende der Animation zentriert?

Question

Dieser Code spielt Animation für Text "Hallo Welt!", Am Anfang der Animation, Textfarbe ist rot. Dann bei den 25%, wird es blau und bei 50%, es wird ausgerichtet auf zentrieren.

Wenn die Animation jedoch abgeschlossen ist, wird der Text an die Startposition zurückbewegt und nicht an der Mitte ausgerichtet.

So, hier ist mein Code:

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

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

Und wo ist Problem in meinem Code?

Answer 1

Sie müssen eingestellt animation-fill-mode-forwards: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

forwards Das Ziel wird die berechneten Werte, die vom letzten Keyframe behalten während der Ausführung aufgetreten. Der letzte Keyframe hängt vom Wert der Animation-Richtung und Animation-Iteration-count:

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-alignnicht animiert werden, ist es von einem Wert zu einem anderen wechseln. Nur teilbare Werte können bitweise animiert werden.

Answer 2

Das Ende einer Animation bei 100% ist:

100% { 

    text-align: center; 

} 

und Sie müssen animation-fill-mode: forwards;, um zu sagen, es zu vermeiden, wieder starten

Answer 3

Sie auch 100% hinzufügen und Animation Richtung erwähnen vorwärts wie unten erwähnt.

p { 
    animation: sample 3s forwards; 
    } 

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