CSS3로 페이드 아웃/페이드 인 효과가 있습니다.

Question

CSS3 애니메이션으로 페이드 아웃/페이드 인 효과를 만들려고합니다. 그것은 브라우저처럼 보이는

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

가 다시 그것을 설정 한 후 0으로 불투명도를 설정하는 바보 같은 생각 (내가 jQuery를 사용하고 있습니다)

#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; 
} 

그리고 자바 스크립트 : 여기 내 CSS입니다 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 솔루션이 아닙니다. 아직 자바 스크립트 코드가 필요합니다. 아래 코드를 확인하십시오.

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; 
}