使用CSS3淡出/淡出效果

Question

我正在尝试使用CSS3动画创建淡出/淡出效果.这是我的CSS:

#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear;
}

和Javascript(我使用jquery):

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");

看起来浏览器认为将不透明度设置为0然后将其设置回1是愚蠢的.有人有可能的解决方案吗？

谢谢.

Answer 1

编辑:关于yaki对纯CSS3解决方案的回答.

您没有给浏览器足够的时间来完成转换.如果你setTimeout在后面的语句中添加一个,它应该可以工作.

像这样的东西:

$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);