Question

我有一张小树的图像，我想使用jQuery和CSS将它从 bottom 增长到 top 。

目前树的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，其余部分是自解释的。< / p>

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

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

从下到上动画图像

2 个答案: