CSS動畫屬性保持動畫後

我想獲得一個CSS動畫屬性留完後，這可能嗎？CSS動畫屬性保持動畫後

這就是我想要達到...

元素應該被隱藏時，頁面上的用戶土地3秒（或其他）之後，就應該淡出，一旦該動畫完成它應該呆在那裏。

這裏是一個小提琴嘗試... http://jsfiddle.net/GZx6F/

這裏是保存代碼...

<h2>Test</h2> 

<style> 
@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0.9; 
    } 
} 

h2 { 
    animation: fadeIn 1s ease-in-out 3s; 
} 
</style>

我知道如何使用jQuery做到這一點..它會是這樣。 ..

<h2>test</h2> 

<script> 
    $(document).ready(function(){ 
    $('h2').hide().delay(3000).fadeIn(3000) 
    }); 
</script>

來源

2012-03-19 SparrwHawk

是[w3schools]（http://www.w3schools.com/cssref/css3_pr_keyframes.asp）過時了嗎？它說Chrome和FireFox只支持替代品。 – iambriansreed 2012-03-19 17:28:52

@iambriansreed：我總是認爲它是:) – BoltClock 2012-03-19 17:29:39

@iambriansreed甚至不點擊w3schools搜索結果。如果您不小心做到了，請遠離顯示器並按下鼠標上的後退按鈕。 – doug65536 2013-10-05 18:17:58

我認爲你正在尋找animation-fill-mode CSS3屬性

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

動畫填充模式CSS屬性指定CSS動畫應該如何之前，它是執行後應用樣式到其目標。

你的目的只是嘗試設置

h2 { 
    animation: fadeIn 1s ease-in-out 3s; 
    animation-fill-mode: forwards; 
}

設置前鋒值«目標將保留在執行過程中遇到的最後一個關鍵幀設定的計算值»

來源

2012-03-19 17:26:29 fcalderan

非常感謝法布里齊奧，我會接受這個答案。只有一件奇怪的事情發生，我不知道你是否知道任何事情 - 在iOS上（沒有測試過其他東西），每當我滾動時，緩存的倒數計時都會暫停。如果我在頁面加載時立即開始滾動，它不會淡入。但是，當我停止滾動時，3s開始倒計時。這只是默認的iOS行爲？謝謝 – SparrwHawk 2012-03-19 17:46:44

除answer的@Fabrizio Calderan，不得不說，你甚至可以將animation-fill-mode財產forwards直接應用到animation。所以下面也應該工作：

@keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0.9; 
 
    } 
 
} 
 

 
h2 { 
 
    opacity: 0; 
 
    animation: fadeIn 1s ease-in-out 3s forwards; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<h2>Test</h2>

來源

2015-02-10 23:07:34 yckart

我有類似的事情發生在我身上。我添加了位置：相對於動畫元素，併爲我修復了它。

來源

2015-07-30 19:56:51 tyau

CSS動畫屬性保持動畫後

回答

相關問題