The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade or slide div (nav) into view

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #42222

    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


    You probably want to be 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.


    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?


    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!



    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,


    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.