Css關鍵幀+不透明度：0完成後帶回div

我正在使用關鍵幀模糊和淡出div單擊文檔時，我無法弄清楚爲什麼動畫完成後，div再次可見。 ..Css關鍵幀+不透明度：0完成後帶回div

CSS

#red{ 
    width:200px; 
    height:200px; 
    margin:50px; 
    background:red; 
} 
.blur{ 
    -webkit-animation: fadeout linear 2.5s; 
} 
@-webkit-keyframes fadeout { 
    0% { -webkit-filter: opacity(100%) blur(0px);} 
    50% { -webkit-filter: opacity(100%) blur(10px);} 
100% { -webkit-filter: opacity(0%) blur(20px);} 
}

$(document).click(function(){ 
    $('#red').addClass('blur'); 
});

是否有更好的方式來做到這一點？這裏有一個jsFiddle

來源

2015-08-31 Alin

您需要使用'animation-fill-mode'來保留動畫的狀態。 – TylerH

刪除'webkit'前綴。或者在它之後添加普通版本。 – Qwertiy

你要使用

animation-fill-mode: forwards;在一個CSS動畫結束保持最後的狀態。

來源

2015-08-31 15:22:41 Harangue

Css關鍵幀+不透明度：0完成後帶回div

回答

相關問題