CSS中的div透明动画

这里有个小问题。我在页面上有一个背景图像。我想要一个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; }

---

。。。很明显我的手刹掉了。。有什么想法吗？谢谢

您的代码没有任何问题。这是使用css3@keyframe的特点和缺点，它将在动画后返回其原始属性值。您应该改为使用javascript的jQuery库，如下所示：

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

#contents{opacity:0.8;}

或者，您可以添加css元素，如下所示：

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

#contents{opacity:0.8;}

---

我知道已经有了答案，但我对工作感到厌倦，所以这里有一个JSFIDLE的另一个概念：

---

使用jquery，它会在

中淡出，谁的不透明度已经通过CSS设置了

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

---

为动画设置

动画填充模式：向前

。这将确保动画不会返回到其原始值并在结束值处停止。

谢谢，添加了不透明度：0.8；到部门去。现在工作很好（想想看，这很明显，哈哈！）。非常感谢快速响应！