CSS 전환으로 div 이동

Question

다음 코드를 사용하여 마우스를 올리면 숨겨진 div가 표시됩니다. CSS transition 속성을 사용하여 숨겨진 div를 페이드 인합니다. CSS 만 사용하여 페이드 대신 숨겨진 (예 : 왼쪽에서 오른쪽으로) div로 슬라이드 할 수 있습니까? 여기 내 코드입니다 :

HTML

<div class="box"> 
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
    <div class="hidden"></div> 
</div> 

CSS

.box{ 
    position: relative;  
} 

.box .hidden{  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: 0;  
    width: 500px; 
    opacity: 0;  
    transition: all 1s ease; 
} 

.box:hover .hidden{ 
    opacity: 1; 
} 

데모 : http://jsfiddle.net/u2FKM/

Answer 1

이와 비슷한?

DEMO

그리고 내가 사용하는 코드 :

.box{ 
    position: relative; 
    overflow: hidden; 
} 

.box:hover .hidden{ 

    left: 0px; 
} 

.box .hidden {  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: -500px;  
    width: 500px; 
    opacity: 1;  
    -webkit-transition: all 0.7s ease-out; 
     -moz-transition: all 0.7s ease-out; 
     -ms-transition: all 0.7s ease-out; 
     -o-transition: all 0.7s ease-out; 
      transition: all 0.7s ease-out; 
} 

나는 또한이 같은 일을 할 수이 경우 어떤 transform: translate();를 사용하여 elment를 이동할 수 있다는 추가 할 수 있습니다 - DEMO nr2

Answer 2

예 즉 가능하며, 모든 브라우저에서 지원되지는 않습니다.

는

Answer 3

transition-property:width; 

이 작동합니다 w3schools를 참조하십시오. 브라우저 의존 코드가 있어야합니다.

Answer 4

공급 업체 접두사를 추가하고 애니메이션을 all으로 변경하여 불투명도와 너비가 애니메이션이되도록했습니다.

이게 당신이 찾고 있는게 있나요? http://jsfiddle.net/u2FKM/3/

Answer 5

을

이것은 당신을위한 좋은 해결책 일 수 있습니다 :이 아주 작은 변화처럼 코드를 변경하십시오

.box{ 
    position: relative; 
} 
.box:hover .hidden{ 
    opacity: 1; 
    width:500px; 
} 
.box .hidden{ 
    background: yellow; 
    height: 334px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    opacity: 0; 
    transition: all 1s ease; 
} 

는이 전환 애니메이션을 관리 할 수 ​​있도록 CSS 속성 내에서 초기 값과 최종 값을 기준으로해야 할 것 같다,

Answer 6

demo here 그냥 내 대답을 추가 참조하십시오.

.box{ 
 
    position: relative; 
 
    top:0px; 
 
    left:0px; 
 
    width:0px; 
 
} 
 

 
.box:hover .hidden{ 
 
    opacity: 1; 
 
    width: 500px; 
 
} 
 

 
.box .hidden{  
 
    background: yellow; 
 
    height: 300px;  
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px;  
 
    width: 0px; 
 
    opacity: 0;  
 
    transition: all 1s ease; 
 
}

<div class="box"> 
 

 
    <a href="#"> 
 
     <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
 
     <div class="hidden"></div> 
 

 
</div>

http://jsfiddle.net/u2FKM/2199/