动画幻灯片自上而下(Animation slide down from top)

你会怎么做这样的动画。新的元素应该与它从外区域的可见区域全高滑动。

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

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

是啊，我也用animation-fill-mode: forwards; 让你div位置不复位。

演示 （请用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;
    }
}