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.

Solution 1:

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.

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..

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

Demo(Please use Firefox to check the demo, if you want to support Chrome and other browsers, you can simply add proprietary properties to support them)

HTML

<divclass="wrap"><divclass="block_1">Hello</div><divclass="block_2">Hello</div><divclass="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;
    }
}