animare un’immagine dal basso verso l’alto

Ho un’immagine di un alberello e vorrei farlo crescere dal basso verso l’ alto usando jQuery e CSS.

Per il momento l’albero ha la posizione bottom a 0 e sale con la funzione jQuery animate() .

Posso creare un div che si sovrappone all’albero e animarlo con la funzione jQuery animate() e rimuoverne l’ height , ma lo sfondo originale (del body ) usa una sfumatura CSS quindi non posso fare in modo che il div sovrapponga all’immagine . Ecco il mio codice:

CSS:

 .wrap_tree{ height:300px; position:relative; } .tree{ overflow: hidden; position:absolute; display:none; bottom:0px; width:200px; left:28%; } 

HTML:

 

JavaScript / jQuery:

 $('.tree').animate({ height: 'toggle' },5000); 

Che ne dici di fare questo con Pure CSS? L’ho creato da zero usando CSS3 @keyframe

Spiegazione: Sto semplicemente sovrapponendo la struttura ad albero usando un elemento posizionato in modo absolute e, anziché usare @keyframe sto comprimendo la proprietà height su 0 , il resto è autoesplicativo.

dimostrazione

Demo 2 ( position: relative; aggiunta position: relative; all’elemento contenitore in quanto è importante fare altrimenti la tua position: absolute; elemento si esaurirà in natura)

Demo 3 Migliora la animation-duration dell’animazione per rallentare la velocità di animazione

 .tree { width: 300px; position: relative; } .tree > div { position: absolute; height: 100%; width: 100%; background: #fff; top: 0; left: 0; -webkit-animation-name: hello; -webkit-animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-name: hello; animation-duration: 2s; animation-fill-mode: forwards; } .tree img { max-width: 100%; } @keyframes hello { 0% { height: 100%; } 100% { height: 0%; } } @-webkit-keyframes hello { 0% { height: 100%; } 100% { height: 0%; } }