mover o div com a transição CSS

Estou a usar o seguinte código para mostrar um mergulhador escondido no hover. Estou a usar a propriedade CSS para desaparecer no div escondido. É possível deslizar no div escondido (por exemplo da esquerda para a direita) em vez de desaparecer usando apenas o CSS? Aqui está o meu código:

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

Demo: http://jsfiddle.net/u2FKM/

Author: user1251698, 2012-12-20
Source

6 answers

Algo assim?

DEMONSTRAÇÃO

E o código que usei: 

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

Também posso acrescentar que é possível mover um elment usando {[[1]}, que neste caso poderia funcionar algo como isto - DEMO nr2

 25
Author: Christofer Vilander, 2012-12-20 11:05:49

Adicionei os prefixos do fornecedor, e mudei a animação para {[[0]}, por isso você tem opacidade e largura que são animadas.

É disto que estás à procura ? http://jsfiddle.net/u2FKM/3/
 3
Author: wakooka, 2012-12-20 09:19:49

Só para adicionar minha resposta, parece que as transições precisam ser baseadas em valores iniciais e valores finais dentro das propriedades css para ser capaz de gerenciar a animação.

As classes CSS reformuladas devem fornecer o resultado esperado: 

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

 3
Author: Chris A, 2017-10-23 20:28:19 
transition-property:width;
Isto deve funcionar. você tem que ter o código dependente do navegador
 2
Author: Shamis Shukoor, 2012-12-20 09:08:41

Esta pode ser a boa solução para ti: muda o código como esta pequena alteração 

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

Ver demonstração aqui

 1
Author: Surya Adhikari, 2014-03-20 20:12:32

SIM, isso é possível, mas não é suportado por todos os navegadores.

Ver w3schools

 -2
Author: noslone, 2012-12-20 09:08:06