Question

I would like to make a div to vanish animated by re-sizing it from its 100% to zero. However, if I just set the field height on the animation, the element start shrinking from the bottom part and I would like to it to start shrinking from the top. Any ideas of how to make ir happen?

This piece of code show my animation today:

@-webkit-keyframes my-animation /* Safari and Chrome */
{

    0%
    {
        opacity: 1;
        height:44px;//element size
    }

    100%
    {
        opacity: 0;
        height: 0px;
    }


}

Thanks in advance.

Answer 1

You can do what you are after by using a little positioning. Here is the relevant code (also refactored):

<div class="foo"></div>

—

.foo {
    position: relative;
}
@keyframes foo {
    100% {
        opacity: 0;
        height: 0;
        top: 44px; /* Height of element */
    }
}​

And here is a live example (hover to trigger the animation): http://jsfiddle.net/joshnh/Fdg3C/