javascript - 从下到上动画图像

Question

我有一张小树的图片，我想使用 jQuery 和 CSS 让它从底部生长到顶部。

目前树的 bottom 位置为 0，并使用 animate() jQuery 函数上升。

我可以制作一个与树重叠的 div 并使用 animate() jquery 函数为它设置动画并删除它的 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，其余的不言自明。

Demo

Demo 2 (添加了 position: relative; 到容器元素，因为这很重要，否则你的 position: absolute; 元素将在野外耗尽)

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