从底部到顶部对图像进行动画处理

Question

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

目前，树的bottom位置为0，并带有animate() jQuery函数。

我可以制作一个与树重叠的div ，并使用animate() jquery函数对其进行animate()并移除其height ，但是（ body ）原始背景使用CSS渐变，因此我无法使div与图像重叠。 这是我的代码：

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);

Answer 1

如何使用Pure CSS做到这一点？ 我使用CSS3 @keyframe从头开始

说明：只是使用absolute定位的元素将树重叠，并且比起使用@keyframe将height属性折叠为0 ，其余是不言而喻的。

演示

演示2 （添加的position: relative;相对于容器元素，因为这对于执行其他position: absolute;很重要position: absolute;否则，您的position: absolute;元素将用完）

演示3 调整animation-duration以降低动画速率

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

Answer 2

HTML

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

CSS

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