I have an image of a little tree and I would like to make it grow from bottom to top using jQuery and CSS.
For the moment the tree has bottom position to 0 and goes up with animate() jQuery function.
I can make a div that overlaps to the tree and animate it with animate() jquery function and removing the height to it, but the original background (of the body) uses a CSS gradient so I can't make the div overlap the image. Here is my code:
CSS:
.wrap_tree{ height:300px; position:relative; } .tree{ overflow: hidden; position:absolute; display:none; bottom:0px; width:200px; left:28%; }
HTML:
<div class="wrap_tree"> <div class="tree"> <img src="tree.png"/> </div> </div>
JavaScript/jQuery:
$('.tree').animate({ height: 'toggle' },5000);
How about doing this with Pure CSS? I made it from scratch using CSS3 @keyframe
Explanation: Am just overlapping the tree using an absolute positioned element, and than using @keyframe am collapsing the height property to 0, rest is self explanatory.
Demo
Demo 2 (Added position: relative; to the container element as this is important to do else your position: absolute; element will run out in the wild)
Demo 3 Tweaking up animation-duration for slower animation rate
.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%; } }
翻译