Grow your CSS skills. Land your dream job.

Fade or slide div (nav) into view

  • # January 24, 2013 at 4:17 pm

    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

    # January 24, 2013 at 4:21 pm

    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.

    # January 24, 2013 at 4:55 pm

    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?

    # January 24, 2013 at 4:59 pm

    > 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?

    Yes, those are the keyframe animations @rosspenman was referring to. While the mozilla developer network provides useful info, you can read further about them here as well: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

    # January 25, 2013 at 4:13 am

    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!

    # January 25, 2013 at 4:24 am

    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

    # January 25, 2013 at 8:36 am

    @grimski, technically it doesn’t run “on load” as CSS isn’t capable of that, but it gives the impression..but, to get it to reset on each screen size, you could do something like this:

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

    #nav-main {
    opacity: 0;
    animation: main-fade 1s forwards;
    }

    What that does, is set opacity on `#nav-main` to 0 when the page is loading, then fades the opacity to 1, the _forwards_ is the animation-fill-mode, which dictates what happens when the animation is done, _forwards_ says that it will maintain the value of the 100% in the animation.

    To give the impression of it happening “on load” you could also include the `animation-delay` property.

    Make sense?

    # January 27, 2013 at 6:42 am

    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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".