css - CSS中的div透明动画

Question

这里有一个小问题。我在页面上有一张背景图片。我想要一个 div 淡入并通过透明度“覆盖”图像。它工作正常，除了最后。透明度/不透明度值应以 0.8 结束，但一旦完成 7 次过渡，它就会“跳”到完全不透明度（不会保持在 0.8）。这是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; }

...我显然在某个地方错过了手刹..有什么想法吗？谢谢

Answer 1

我知道已经有了答案，但是我工作很无聊，所以这里有一个带有另一个概念的 jsfiddle：http: //jsfiddle.net/7MFQX/2/

---

使用 jquery 它会淡出<div>谁的不透明度已经通过 CSS 设置

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

Answer 2

Your code does not have any problem. This is the characteristics and disadvantage of using css3 @keyframe, it will returns its original property value after animation. You should instead use the jQuery library of javascript, like this:

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

Or, you can just add this css elements, like this:

#contents{opacity:0.8;}

Answer 3

为您的动画设置animation-fill-mode:forwards。这将确保动画不会返回到它的原始值并在结束值处停止。