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

177

我正在CSS中設置爲opacity: 0;的某些元素運行動畫。動畫類應用onClick，並使用關鍵幀將不透明度從0更改爲1（等等）。在CSS3動畫結束時保持最終狀態

不幸的是，當動畫結束時，元素將返回到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; } 
}

來源

2012-10-20 Dan

我會發布我自己的重複通知：http://stackoverflow.com/questions/9196694/css3-animation-scale 至少我有一個更具啓發性的標題！ – Dan

[CSS3 Animate：如何在動畫運行後讓對象不能恢復到初始位置？]（http://stackoverflow.com/questions/6897724/css3-animate-how-to-have-the-對象不歸還給它的初始位置） –

300

嘗試增加animation-fill-mode: forwards;。例如是這樣的：

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

來源

2012-10-20 18:02:03

是的，就是這樣。我會盡可能檢查你的答案。如果任何CSS頭想要評論所需要的邏輯，我很想知道！ – Dan

你可以在這裏閱讀關於動畫填充模式屬性 - http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property希望有所幫助！ –

@dan'animation-fill-mode'屬性的'forwards'值確保元素將在動畫結束後保存動畫的最後一個關鍵幀狀態。例如，如果動畫將「寬度」從0更改爲100px，則此屬性可確保動畫結束後該元素保持100px寬。 –

如果使用更多的動畫屬性的簡寫是：

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

2秒的持續時間，線性定時功能，0.5秒的延遲，1迭代數，法線方向，正向填充模式

來源

2017-01-14 00:28:01 agiopnl

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

回答

相關問題