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