CSS 전이 쉽게 아웃

Question

가 좋아 작동하지 않는, 그래서 이것은 밖으로 완화되지 않는 이유를 이해하지 않습니다 : (빠른보기 위해, 단지 http://htmledit.squarefree.com에 붙여, 예를 들어)

<style> 
#over { 
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg); 
height:150px; 
width:150px; 
} 

#in { 
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
height:150px; 
width:150px; 
} 

#in:hover { 
opacity: 0; 
transition: opacity .3s ease-in-out; 
} 

</style> 

<div id="over"> 
<div id="in"></div 
</div> 

Answer 1

정확히 무엇을 요구하고 있는지 확신 할 수는 없지만 전환이 마우스 오버시에만 발생하고 마우스를 떼었을 때가 아니라고 말한 것 같습니다 (이전과 같은 방식으로 스냅됩니다. 전환). 전환 속성을 #in:hover이 아닌 #in에 추가해야합니다. 전환은 귀하의 #in 요소가 마우스 오버 될 때만 발생합니다. #in에서 전환을위한 CSS를 이동하면 마우스 오버 및 마우스 아웃에서 작동합니다. 마우스 오버 상태에서 원하는 CSS를 #in:hover 아래로두고 싶습니다.이 경우 불투명도는 변경되지만 실제 전환 CSS 속성은 #in이됩니다.

은 좀 더 명확하게하려면 :

#in { 
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
    height:150px; 
    width:150px; 
    transition: opacity .3s ease-in-out; /* add this here */ 
} 

#in:hover { 
    opacity:0; 
    /* and we've removed it from here */ 
} 

알 수있는 것은 편리 성에서 아웃이 전환 때와는 아무 상관이 없다는 것입니다. 그런 식으로 보일 수도 있고, 쉽게 들리는 것이 마우스 오버 일 수도 있지만, 실제로는 쉽게 들락날락 해지면 느긋하게 쉬어 지거나 느려지 게됩니다. 천천히 천천히 그리고 나서 끝까지 가속합니다. 변화가 일어날 때가 아니라 변화 자체의 스타일과 관련이 있습니다.

어쩌면 당신은 이미 그것을 이해했을지도 모르지만, 귀하의 질문에 따라 당신이 혼란스러워 보였을 것입니다.

Answer 2

@welbornio의 대답이 나를 위해 일하는 것을 알았지 만, 안락함이 처음에는 완벽하게 작동하지 않았습니다. 'img'에 적용 할 때이지 효과는 간헐적으로 만 작용했습니다. 나는 효과가 매번 작동하기 위해서, 'img'에 편함을 적용하고 'hover'에 편이성을 적용해야한다는 것을 발견했습니다. 왜 이런 일이 발생했는지 모르겠지만 누군가가 같은 문제에 부딪혔을 때 해결책이됩니다.