如何保留動畫後的樣式？

我正在從事一個投資組合，以顯示我何時申請我的下一項研究。由於我們生活在2012年，它有大量的花式動畫和CSS3垃圾，只是爲了給他們'我們需要這個人'的感覺。目前我遇到了一些小問題。如何保留動畫後的樣式？

這是一個特定元素的一小部分：

/* This is the CSS of the elements with the id called 'fadein' */ 
#fadein { 
    -moz-animation-duration: 2s; 
    -moz-animation-name: item; 
    -moz-animation-delay: 4.5s; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: item; 
-webkit-animation-delay: 4.5s; 
opacity:0; 
-webkit-opacity:0; 
} 

@-webkit-keyframes item { 
from { 
-webkit-opacity: 0; 
    } 
to { 
-webkit-opacity: 1; 
} 
}

請注意，我離開了Firefox的關鍵幀，因爲它們是完全一樣的。正確的，醜陋的格式的CSS，使元素與ID「淡入淡出」......淡入

問題是，動畫完成後，元素再次消失。這會將難看格式的Css變爲不可用的Css。

有沒有人有任何想法如何保持動畫後改變的風格？

我想這個問題之前已經被問過了，如果是這樣，我很抱歉。

來源

2012-02-03 amees_me

嘗試：

#fadein { 
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ 
    -moz-animation-fill-mode: forwards; /* FF 5+ */ 
    -o-animation-fill-mode: forwards;  /* Not implemented yet */ 
    -ms-animation-fill-mode: forwards;  /* IE 10+ */ 
    animation-fill-mode: forwards;   /* When the spec is finished */ 
}

來源

2012-02-03 15:30:35 Duopixel

非常感謝！現在工作順利。爲了實現跨瀏覽器兼容性，我可以將'webkit'部分更改爲'moz'嗎？ – 2012-02-04 16:19:58

是的，支持的瀏覽器更新了答案。 – Duopixel 2012-02-04 17:59:35

令人驚歎！做得很好：）。 – 2012-02-04 18:31:19

Duopixels的答案是正確的方式，但不是完全的跨瀏覽器，但是，這個jQuery插件使動畫回調，你可以風格你在回調函數是怎麼樣的元素： https://github.com/krazyjakee/jQuery-Keyframes

來源

2012-07-15 17:52:54

如何保留動畫後的樣式？

回答

相關問題