Comment rétrécir l'élément de haut en bas?

Question

Je voudrais faire une div pour s'annuler en le redimensionnant de son 100% à zéro. Cependant, si je viens de définir la hauteur du champ sur l'animation, l'élément commence à rétrécir de la partie inférieure et je voudrais qu'il commence à rétrécir par le haut. Des idées sur la façon de le faire?

Ce morceau de code montrer mon animation aujourd'hui:

@-webkit-keyframes my-animation /* Safari and Chrome */ 
{ 

    0% 
    { 
     opacity: 1; 
     height:44px;//element size 
    } 

    100% 
    { 
     opacity: 0; 
     height: 0px; 
    } 


} 

Merci à l'avance.

Answer 1

Vous pouvez faire ce que vous cherchez en utilisant un petit positionnement. Voici le code correspondant (refactorisé):

<div class="foo"></div> 

-

.foo { 
    position: relative; 
} 
@keyframes foo { 
    100% { 
     opacity: 0; 
     height: 0; 
     top: 44px; /* Height of element */ 
    } 
}​ 

Et voici un exemple en direct (vol stationnaire pour déclencher l'animation): http://jsfiddle.net/joshnh/Fdg3C/