Fade or slide div (nav) into view

[grimski]

Hi there,

I have a responsive website, when the browser is resized to a certain point the navigation becomes fixed in position at the top of the page.

Now I was wondering when this happens, can I have it fade into view (or slide from the top) using css? I tried using the transition declaration on opacity on the

which contains my unordered list but it doesn’t seem to do anything?

Anyone done this before?

Cheers!

[rosspenman]

You probably want to be using [CSS animations](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations) rather than transitions to accomplish this (unless I’ve misunderstood you and the nav is hidden until the browser window is a certain size).

However, this might not even be worth worrying about. It’s not very common to resize your browser window in the middle of looking at a page.

[grimski]

Thanks for your help. I agree, I don’t think its something I’d really use. Thought something I might include just as a silly little ‘extra’. I don’t know a whole lot of CSS animates or transitions so I’m just trying to play around with them when I can.

So I take it its possible for something to fade from a value (0) to 100% without interaction, for example a hover. So it appears as though its happens ‘on load’ for a better phrase?

[grimski]

Thats great, thanks!

Like I say I mightn’t use this but I’m just trying to get familiar with what I can do with css transform and animation as I’ve not really used them yet.

A question, at the minute I have:

@keyframes nav-main-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}

.nav-main {
animation: nav-main-fade 1s;
}

Now this runs ‘on load’ and only once. Is there a way to make this run just when my 600.css file is used, i.e. just when my mobile navigation is used. So it would only animate when a certain media-query is reached? If that makes sense?

Thanks again!

[grimski]

Doh!

I tried declaring the same animation in each style sheet (style.css, 480.css, 600.css, 768.css and 980.css) thinking it would just run again each time a new stylesheet was meet/loaded.

But adding:

#nav-main {
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
-o-animation: none; /* Opera 12+ */
animation: none; /* IE10 */
}

In the stylesheet above seemed to sort it. I’m guessing if I wanted it to run every time a different stylesheet was loaded I’d have to set the animation to none, then set it to run again directly after.

Thanks again for you help,
Steve

[grimski]

Thanks great @ChrisP! Yeah I didn’t literally mean on load, just the impression the animations gives – should of worded it better!

Makes sense, all of this has given me a good base for playing around with animations/transitions in the future I think.

Cheers again!

[Author]

Posts