- This topic is empty.
-
AuthorPosts
-
January 24, 2013 at 4:17 pm #42222grimskiParticipant
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 #122186rosspenmanParticipantYou 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 #122198grimskiParticipantThanks 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 #122084grimskiParticipantThats 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 #122243grimskiParticipantDoh!
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,
SteveJanuary 27, 2013 at 6:42 am #122471 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.