div CSS中的透明度動畫

這裏有一個小問題。我在頁面上有一個背景圖片。我想要一個div淡入，並通過透明度「覆蓋」圖像。它工作正常，除了最後。透明度/不透明度值應該在0.8時結束，但一旦完成了7次轉換，它會跳轉到完全不透明度（不會保持在0.8）。這裏是CSS代碼：div CSS中的透明度動畫

@-webkit-keyframes fadein { 
    from { opacity: 0.5; } 
    to { opacity: 0.8; } 
} 

@-moz-keyframes fadein { 
    from { opacity: 0.5; } 
    to { opacity: 0.8; } 
} 

@keyframes fadein { 
    from { opacity: 0.5;} 
    to { opacity: 0.8; } 
} 

#contents {width:900px; height:600px; margin-left:40px; border:groove; background-color: #003; -webkit-animation: fadein 7s; -moz-animation: fadein 7s; animation: fadein 7s; }

...我顯然錯過了手制動的地方..任何想法？謝謝

來源

2013-08-21 user2704460

您的代碼沒有任何問題。這是使用css3 @keyframe的特點和缺點，它會在動畫之後返回它的原始屬性值。而應該使用JavaScript的jQuery庫，就像這樣：

$("#contents").css("opacity","0.5"); 
$("#contents").animate({opacity:'0.8'},7000);

或者，你可以添加此CSS元素，像這樣：

#contents{opacity:0.8;}

來源

2013-08-21 16:49:16

謝謝，添加了不透明度：0.8;到div。現在工作正常（很明顯，當你想到它大聲笑！）。快速反應非常感謝！ – user2704460

我知道已經有一個答案，但我m，在工作無聊，所以這裏的另一個概念的jsfiddle：http://jsfiddle.net/7MFQX/2/

使用jQuery它在 <div>誰的不透明度是通過CSS已經組衰落

$(document).on("click", ".btn", function() { 
    $(".overlay").fadeToggle();  
});

來源

2013-08-21 17:12:13 iRector

設置爲您的動畫的animation-fill-mode:forwards。這將確保動畫不會返回到原始值並停止在最終值。

來源

2014-10-21 10:35:06 JonasB

div CSS中的透明度動畫

回答

相關問題