保持CSS動畫在結束時的最終狀態

Question

我正在對一些在CSS中設定為opacity: 0;的元素運行動畫。動畫類別被應用於onClick事件，使用關鍵幀，它將不透明度從0變為1（以及其他一些變化）。

不幸的是，當動畫結束時，元素會回到opacity: 0的狀態（在Firefox和Chrome中都是如此）。我本能地認為動畫元素會保持最終狀態，覆蓋它們的原始屬性。這不是真的嗎？如果不是，我該如何讓元素保持最終狀態？

程式碼（不含前綴版本）：

@keyframes bubble {
    0% { transform:scale(0.5); opacity:0.0; }
    50% { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

Answer 1

如果您使用更多的動畫屬性，則可以使用簡寫方式：

animation: bubble 2s linear 0.5s 1 normal forwards;

這樣設定：

• bubble 動畫名稱
• 2s 持續時間
• linear 時間函數
• 0.5s 延遲
• 1 迭代次數（可以是 'infinite'）
• normal 方向
• forwards 填充模式（如果您希望相容於使用結束位置作為最終狀態，請設定為'backwards' [這是為了支援關閉動畫的瀏覽器]{僅回答標題，而不是您的具體情況}）

可用的時間函數：

#

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

可用的方向：

#

normal | reverse | alternate | alternate-reverse

Answer 2

嘗試新增 animation-fill-mode: forwards;。例如，可以像這樣使用簡寫：

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode