Forums

  • # 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 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 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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag