动画幻灯片自上而下 [英] Animation slide down from top

问题描述

你会怎么做这样的动画。
新的元素应该与它的距离无形地区的可见区域全高滑动。结果

How would you do an animation like this. The new element should slide with its full height from the invisible area to the visible area.

推荐答案

，我明白这是要求jQuery的，但如果你不知道，这可以用CSS来完成的很好，所以我考虑张贴CSS的答案，如果你不想要一个CSS的解决方案，你可以简单地忽略这个帖子。

Am aware that this was asked for jQuery but if you are not aware that this can be done with CSS as well, so I considered posting a CSS answer, if you don't want a CSS solution, you can simply ignore this post.

我从头开始做这个，现在用CSS3 @keyframes 动画，现在用动画延迟控制每个元素的秋天，剩下的就是自我解释。

I've made this from scratch, am using CSS3 @keyframes animation, and am using animation-delay to control the fall of each element, rest is self explanatory..

是啊，我也使用动画填充模式：前锋; ，让您 DIV 位置并不复位。

Yea, am also using animation-fill-mode: forwards; so that you div positions don't reset.

演示 的（请用Firefox来检查演示，如果要支持Chrome和其他浏览器，你可以简单地添加专有的属性，以支持他们）的

HTML

<div class="wrap">
    <div class="block_1">Hello</div>
    <div class="block_2">Hello</div>
    <div class="block_3">Hello</div>
</div>

CSS

.wrap {
    height: 200px;
    width: 300px;
    overflow-y: hidden;
    position: relative;
}

.wrap > div {
    height: 20px;
    width: 280px;
    margin: auto;
    background: #f5f5f5;
    position: absolute;
    top: -100px;
}

.wrap > div.block_1 {
    animation-name: block1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.wrap > div.block_2 {
    animation-name: block2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

.wrap > div.block_3 {
    animation-name: block3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 5s;
}

@keyframes block1 {
    0% {
        top: -100px;
    }
    100% {
        top: 0;
    }
}

@keyframes block2 {
    0% {
        top: -100px;
    }
    100% {
        top: 40px;
    }
}

@keyframes block3 {
    0% {
        top: -100px;
    }
    100% {
        top: 80px;
    }
}

这篇关于动画幻灯片自上而下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！