déplacer div avec CSS transition

Je suis à l'aide de code suivant pour afficher un div caché sur le vol stationnaire. Je suis en utilisant le CSS transition propriété pour à s'estomper dans le caché div. Est-il possible de glisser dans le caché (par exemple de gauche à droite) div au lieu de s'atténuer en utilisant le CSS?
Voici mon code:

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

Démo:
http://jsfiddle.net/u2FKM/

source d'informationauteur user1251698

  1. 25

    Quelque chose comme cela?

    DÉMO

    Et le code que j'ai utilisé:

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

    Je peut ajouter également qu'il est possible de déplacer un elment à l'aide de transform: translate(); , qui dans ce cas pourrait travailler sur quelque chose comme cela - DÉMO nr2

  2. 3

    J'ai ajouté le vendeur préfixes, et changé l'animation allde sorte que vous avez à la fois l'opacité et la largeur qui sont animées.

    Est-ce que vous cherchez ? http://jsfiddle.net/u2FKM/3/

  3. 2
    transition-property:width;

    Cela devrait fonctionner. vous devez avoir de navigateur de code dépendant de

  4. 1

    Cela peut être la bonne solution pour vous: modifiez le code comme ça très peu de changement

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

    Voir démo ici

  5. -2

    Oui, c'est possible, mais n'est pas supporté par tous les navigateurs.

    Voir w3schools