css - CSS中的div透明动画

Question

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

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

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

或者，您可以只添加此 css 元素，如下所示:

#contents{opacity:0.8;}