用CSS3淡出/淡入效果

我想用CSS3动画创建淡出/淡出效果。这里是我的CSS：用CSS3淡出/淡入效果

#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.有人有可能的解决方案吗？

谢谢。

来源

2012-01-26 Kevin

只是好奇......为什么不用JQuery本身来处理它呢？您可以使用JQuery提供的fadeIn（）和fadeOut（）函数。 –

我之前使用过jquery，但由于我认为GPU加速，CSS3动画具有更好的性能。这是针对只为Firefox设计的Web应用程序，因此使用CSS3不会造成问题。 – Kevin

编辑：关于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);

来源

2012-01-26 14:02:41

非常感谢！它解决了这个问题。 – Kevin

这样的事情？

$('#button').hover(
    function() { 
     $(this).animate({opacity: 0}, 500); 
    }, 
    function() { 
     $(this).animate({opacity: 1}, 500); 
    } 
);

来源

2012-01-26 14:06:07 Deadlykipper

实际上接受的解决方案不是CSS3解决方案（它仍然需要一些JavaScript代码）。请检查下面的代码。

HTML：

<a id='buttonleft'>Button left</a> 
<a id='buttonright'>Button right</a>

CSS：

#buttonleft, #buttonright { 
    text-align: left; 
    background: rgb(180,180,255); 
    opacity:0.5; 

    /* property duration timing-function delay */ 
    -webkit-transition: opacity 500ms linear 100ms; 
    -moz-transition: opacity 500ms linear 100ms; 
    -o-transition: opacity 500ms linear 100ms; 
    transition: opacity 500ms linear 100ms; 
    } 

#buttonleft:hover, #buttonright:hover { 
    opacity: 1.0; 
}

来源

2012-01-26 14:27:04

非常好，我不知道转换的第四个参数。 –

第四个参数用于延迟，此示例仅淡入。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions – Aligned

您可以使用CSS3 animations现在，它被超过时，你问原来的问题的支持。我创建了一个jsFiddle showing how to do this on hover。

@keyframes demo { 
    from { 
     animation-timing-function: ease; 
     opacity: 1; 
    } 
    50% { 
     animation-timing-function: ease-in; 
     opacity: 0; 
    } 
    to { 
     animation-timing-function: ease-inout; 
     opacity: 1; 
    } 
} 

img:hover 
{ 
    animation-delay: 0s; 
    animation-duration: 2s; 
    animation-iteration-count: 1; 
    animation-name: demo; 
}

来源

2015-06-22 14:43:55 Aligned

用CSS3淡出/淡入效果

回答

相关问题