css動畫有兩個步驟，沒有轉換

Question

我正在製作一個css動畫來切換元素的背景顏色。

此動畫只有兩個階段，兩個階段之間沒有平滑過渡。

這意味着，前50％的動畫，背景顏色將是blue，以及動畫的最後50％，背景顏色將爲grey，而不會在兩者之間進行轉換。

這裏是完全正常的動畫：

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>

我不知道是否有做一個簡單的方法。我正在尋找的是在keyframes內只使用from和to，而不需要任何額外的步驟。

Answer 1

您可以使用animation-timing-function: steps(1)來實現它，如下面的代碼片段所示。您可以在MDN中找到有關animation-timing-functionhere和通用steps值here的更多詳細信息。

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

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

<div></div>

注：我在50%而不是100%設置grey顏色關鍵幀由於this answer討論了這個問題。

Answer 2

您也可以使用快捷符號：

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

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

<div></div>