使用CSS關鍵幀交換狀態

假設您希望某個元素在乙個迴圈中處於一種狀態9秒鐘，而處於另一種狀態1秒鐘。

狀態之間不進行任何補間，只是直接交換。

我想知道這一天該怎麼辦，薩拉·德拉斯納（sarah drasner）向我展示了您可以使用關鍵幀之間真正短的距離從一種狀態切換到另一種狀態。就像59.999％到60％。沒有機會在正常的動畫持續時間（例如10秒）之間進行補間。

在codepen上檢視 chris coyier （ @chriscoyier ）的「使用快速關鍵幀更改進行筆狀態更改」。

也許稍微乾淨一點，如果使用以下步驟，您甚至不必對.999東西變得棘手：

div

這使我偶然發現了另一種超級奇怪css東西。您會認為，如果使用steps(1)，根本不會發生任何變化，對嗎？既然只有一步？並非如此，當您使用steps(1)進行誰知道什麼推理時，實際上有兩個步驟。我們可以使用它。

1-1-1-1-1-1-1-1-1-2

您可以這樣做：

div 
@keyframes color 
}

該div只會變成teal1秒鐘！然後切換回orangered。將該關鍵幀更改為70％，您將獲得：

1-1-1-1-1-1-1-2-2-2

將其更改為10％，您將獲得：

1-2-2-2-2-2-2-2-2-2

請參閱codepen上的chris coyier （ @chriscoyier ）的pen 2efd2dc514da5485073acd6f4b9f3dab 。

現在，我們有了乙個很酷的技巧，可以在定時迴圈中更改狀態。如果您不希望迴圈部分，則可以讓動畫執行一次並停留在該位置，例如：

div 
@keyframes color 
}

我們在這裡所做的所有操作都刪除了使之重複的infinite關鍵字，並使用forwards表示「當到達末尾時，將樣式保持在最終狀態」。（both關鍵字也可以這樣做。）

但是，如何通過使用者互動從一種狀態轉換為另一種狀態？甚至有可能！想象乙個動畫，它具有超長的持續時間（例如幾天和幾天）。您可以將使用者互動與在其中的位置（狀態）跳轉相關聯。這是乙個簡單的演示，其中單擊鏈結會觸發:target狀態，該狀態會觸發動畫跳到該狀態的關鍵幀中的某個位置：

在codepen上檢視 chris coyier （ @chriscoyier ）的pen keyframe state changer 。

夥計們，只是花招。我們將在這裡呆十年。