Bitte helfen Sie mir zu verstehen, warum die folgende CSS-Animation keinen Farbwechsel zwischen rot und blau erzeugt.CSS-Animation zum Umschalten zwischen zwei Zuständen
div {animation: colorswitch 1s step-end infinite}
@keyframes colorswitch {0% {color:red} 100% {color:blue}}<div>text</div>als Zeitfunktion step-end I angeben, die direkt soll in den Endzustand springen. Aber es funktioniert nicht.
Hier ist eine Lösung von Farbschalter Animation.
div {
animation: colorswitch 1s step-end infinite;
}
@keyframes colorswitch {
0% {color:red}
50% {color:blue}
}
immer noch versuchen, zu verstehen, warum es so verhalten wird.
Warum 50% funktioniert?
Es funktioniert auch for-
@keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:blue}
}
für hinzufügen
@keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:red}
}
Laut MDN ist 'step-end' ein Alias von' steps (1, end) '(https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function) – GetFree
Ja, aber 'steps (1)' oder 'steps (1, end)' hat keine Animation, es bleibt immer in 0%. –
Wenn ich "step-end" durch "steps (1, end)" ersetze, funktioniert das auch. Was bedeutet, dass beide dasselbe tun. – GetFree
Ah ... Ich denke, ich sehe das Problem. Ich denke, das ist es, wonach du gesucht hast.
div {
font-size: 72px;
animation: colorswitch 1s step-end infinite;
}
@keyframes colorswitch {
0% {
color: red;
}
50% {
color: blue;
}
}<div>
text</div>Warum 50%? sollte es nicht 100% sein? – GetFree
Ich bin verwirrt ... wenn es geradeaus bis zum Ende springen soll deshalb nicht versuchen, unendlich zu wiederholen? –
Da ich "unendlich" als Iterationszähler angegeben habe, sollte es für immer wiederholt werden. – GetFree
Wiederholen Sie was ... es springt direkt zum Ende. –