Javascript 从下到上设置图像动画

我有一个小树的图像，我想使用jQuery和CSS使它从下到上生长

目前，树的

bottom

位置为0，并使用

animate（）

jQuery函数向上移动。

我可以制作一个与树重叠的

div

，并使用

animate（）

jquery函数对其进行动画处理，然后移除

高度，但是原始背景（主体的
使用CSS渐变，所以我不能使
div
与图像重叠。
这是我的密码：

CSS:

HTML:

用纯CSS做这个怎么样？我使用CSS3
@keyframe

说明：我只是使用
绝对
定位元素重叠树，而不是使用
@关键帧
我将
高度
属性折叠为
0
，其余内容不言自明


（添加了容器元素的
position:relative；
，因为这对于执行其他操作非常重要；
position:absolute；
元素将在野外耗尽）

调整
动画持续时间
以降低动画速度

HTML

请提供一个JSFIDLE复制您的issue@A.Wolff很简单，他想要一个树木生长的效果；）@外星人先生哈哈，在树边，我在想一些类似树景的东西，真丢脸；）@答：沃尔夫哈哈不，他说要从下到上制作动画，所以我知道他想要达到树的生长效果；）不抱歉，有一个问题：/我可以使.tree>div透明吗？因为在渐变css背景上，我看到了带有白色框的动画。。请看这里：@user3340590您可以编辑JSFIDLE以添加您正在谈论的“GradiantCSS背景”about@user3340590只需在叠加元素上使用相同的渐变，如Wolffsuggested@user3340590等等，我会提供另一种实现完美的方法！再次感谢：）
.wrap_tree{
    height:300px;
    position:relative;
}
.tree{
    overflow: hidden;
    position:absolute;
    display:none;
    bottom:0px;
    width:200px;
    left:28%;
}

<div class="wrap_tree">
    <div class="tree">
        <img src="tree.png"/>
    </div>
</div>

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

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

<div><img src="image03.png" /></div>

div {
  position: relative;
  -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst 5s linear 2s infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {left:0px; top:0px;}
  25%  {left:0px; top:0px;}
  50%  {left:0px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
  0%   {left:0px; top:0px;}
  25%  {left:0px; top:0px;}
  50%  {left:0px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}