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

はいそれが可能です、すべてのブラウザでサポートされているわけではありません。

これは動作するはずw3schools

Answer 3

transition-property:width; 

を参照してください。ブラウザに依存するコードが必要です

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

はちょうど私の答えを追加するdemo here

Answer 6

を参照してください、遷移アニメーションを管理できるようにCSSプロパティ内の初期値と最終値に基づいてする必要があると思われます。

.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/