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中的透明度动画

回答

相关问题