Transitioning Affixed Navigation bar - CSS

Question

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.

Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.

When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.

Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.

Here's the FIDDLE.

Please help me in animating it when the user scrolls down.

Answer 1

To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.

What properties do you have available to change?

You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.

After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.

.navigation {
    background: #fff;
    /* position: relative; */
    width: 100%;
    top: -250px;
}

Then we can transition it to 0:

#nav.affix {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 1s ease-in;
}

RESULT:
http://jsfiddle.net/ShL4T/8/

Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 2

I could not get this to work until I implicitly added position:static to .navigation.