css Animation mit zwei Schritten und ohne Übergang

Question

Ich arbeite an einer css Animation, um die Hintergrundfarbe eines Elements zu wechseln.

Diese Animation besteht nur aus zwei Phasen und keinen fließenden Übergängen zwischen den beiden Phasen.

Es bedeutet, die ersten 50% der Animation, die Hintergrundfarbe wird blue sein, und die letzten 50% der Animation, die Hintergrundfarbe wird grey sein, ohne einen Übergang dazwischen.

Hier ist die Animation voll funktionsfähigen:

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: blue; 
 
    } 
 
    50.00001% { 
 
    background: grey; 
 
    } 
 
    100% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

Ich frage mich, ob es ein einfacherer Weg, das zu tun. Was ich suche, ist nur from und to innerhalb der keyframes ohne zusätzlichen Schritt zu verwenden.

Answer 1

Sie können es mit der animation-timing-function: steps(1) wie im folgenden Snippet angegeben erreichen. Sie können weitere Details über die animation-timing-functionhere und die generische steps Wert here in MDN finden.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s steps(1) infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

Hinweis: Ich habe in this answer den Keyframe für grey Farbe bei 50% statt 100% aufgrund des Problems diskutiert eingestellt.

Answer 2

Sie auch eine Short-Cut-Notation verwenden:

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    from, 50% { 
 
    background: blue; 
 
    } 
 
    50.00001%, to { 
 
    background: grey; 
 
    } 
 
}

<div></div>