Jquery 动画从顶部向下滑动

你将如何制作这样的动画。 新元素应以其全高从不可见区域滑动到可见区域。

---

我知道这是jQuery要求的，但是如果你不知道CSS也可以做到这一点，所以我考虑发布一个CSS答案，如果你不想要CSS解决方案，你可以忽略这篇文章

我从头开始做这个，我使用CSS3

@关键帧

动画，我使用

动画延迟

控制每个元素的下降，其余的都是不言自明的

是的，我也在使用

动画填充模式：向前使您的
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>

我没有密码。有很多内置jquery的方法，比如append（）.slideDown（）。但这一切都不同，因为新元素从高度0开始。你好，德里克。有什么吗？@A.K没有，他只是被相似的名字迷住了……你可以在这里发表一些想法，而不是在这里聊天：）@Alien先生：哦，明白了。谢谢哇哦。好主意！是的，我更喜欢jquery，但我尝试一下@bergman jQuery也一样，在CSS中使用
transition
属性，然后使用
.CSS（）调整
top
，我又试了一次。新的元素应该压制其他元素，也可以向下滑动。因此新元素应该保持在顶部。@bergman交换
top
值或使用多个动画，以便当第二个动画滑动时，第一个动画也向下移动。。
.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;
    }
}