CODEWITHSUNDEEP
csscss-transitionscss-animations
callmekatootie
callmekatootie

Reputation: 11228

css animate top to auto

I have a div that I need to animate.

The animation starts with the div being 43px from the top of the viewport after which it moves downwards and then the div should stop at its natural position (top:auto) - the position where the div would normally be located.

I have styled the div as:

.page-slider {
    position: absolute;
    background-color: #FFFFFF;
    display: block;
    width: 100%;
    -webkit-box-shadow: 0 -7px 7px -7px #333333;
    -moz-box-shadow: 0 -7px 7px -7px #333333;
    box-shadow: 0 -7px 7px -7px #333333;
    animation: uncover 3s ease 0s 1 ;
    -webkit-animation: uncover 3s ease 0s 1 ;
    -moz-animation: uncover 3s ease 0s 1 ;
}

I have defined my animation as:

@keyframes uncover {
    from {
        top: 43px;
        height: 1000px;
    }

    to {
        top: auto;
        height: 0;
    }
}

@-webkit-keyframes uncover {
    from {
        top: 43px;
        height: 1000px;
    }

    to {
        top: auto;
        height: 0;
    }
}

The div is basically empty and thus the height is set to 1000px so that it blocks the contents behind it as it progresses towards the bottom.

Now, the issue is that with the above markup, the animation behaves weirdly. It starts at 43px as expected but then instead of moving down, it moves up (with the height of the div reducing with each second) and then the div comes to rest at its natural position.

If I change the top in the from section of the keyframe to 100% from auto, then it does the trick, but the div crosses its natural position all the way to the bottom of the viewport and then after 3 seconds comes back to its natural position.

How do I animate the div such that it starts at 43px from the top and then comes to rest at its natural position (top: auto)?

Upvotes: 0

Views: 1773

Answers (2)

Tony
Tony

Reputation: 492

I think you can stop the animation at end by using : fill-mode.

it seems to be the same issu :

Can't stop animation at end of one cycle

best regards.

Upvotes: 1

Astralian
Astralian

Reputation: 275

Try to use max-height instead height, may be max-height bigger than your box can help you.

Upvotes: 0

Related Questions