CODEWITHSUNDEEP
jqueryhtmlcssanimation
bergman
bergman

Reputation: 185

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

Upvotes: 1

Views: 9574

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157404

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

<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;
    }
}

Upvotes: 3

Related Questions