CSS3 transition inverse ne pas prendre effet

Question

J'ai un créer deux divs qui se chevauchent en utilisant z-index et celui du haut diminuera la largeur des moyens, mais je ne peux pas le faire rétrécir de droite à gauche, même si j'ai ajouté animation-direction:reverse;

EXAMPLE

Comment changer la direction du rétrécissement?

Answer 1

animation-direction est sans importance ici. Cette propriété concerne les animations CSS. Vous utilisez transition s. Deux choses différentes entièrement.

Donnez .grow une valeur de position droite et envelopper vos div actuelles dans un récipient avec un positionnement relatif:

WORKING DEMO

<div class="pos_rel"> 
    <div class="holder"></div> 
    <div class="grow"></div> 
</div> 

---

.grow { 
    right:0; 
} 

En outre, vous devriez probablement le :hover sur l'élément parent pour empêcher votre souris de sortir de .grow lors de la transition:

DEMO

.pos_rel:hover .grow { 
    width: 50px; 
} 

Answer 2

http://jsfiddle.net/venkat7668/a4DUv/2/ 

J'ai modifié votre code peu pour obtenir votre animation attendue.

<div class="main"> 
    <div class="grow"></div> 
    <div class="holder"></div> 
<div> 

.main { 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 
.holder { 
    position:absolute; 
    width: 300px; 
    height: 300px; 
    background:#cccccc; 
    z-index:1; 
} 
.grow { 
    width: 300px; 
    height: 300px; 
    background: green; 
    -webkit-transition: width 5s; 
    transition: width 5s; 
    float:right; 
    position:relative; 
    z-index:2; 
} 
.grow:hover { 
    width: 50px; 
}