动画从顶部向下滑动

Question

你会怎样做这样的动画？ 新元素应以从隐形区域到可见区域的整个高度滑动

Answer 1

我知道这是jQuery的要求但如果你不知道这也可以用CSS完成，所以我考虑发布一个CSS答案，如果你不想要一个CSS解决方案，你可以简单地忽略这个交。

我是从零开始做的，使用CSS3 @keyframes动画，并使用animation-delay来控制每个元素的下降，其余部分是自解释的。

是的，我也在使用animation-fill-mode: forwards;，因此您div的位置不会重置。

Demo （请使用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;
    }
}