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

編集：純粋なCSS3ソリューションのyakiの答えを尊重してください。

あなたは、ブラウザに移行を完了するのに十分な時間を与えていません。後者の文にsetTimeoutを追加すると、それが機能するはずです。このような

何か：このような

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

Answer 2

何か？

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

Answer 3

実際に受け入れられるソリューションは、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; 
} 

Answer 4

あなたはそれがより多くのあなたは、元の質問をしたときよりも、サポートされていることを今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; 
}