Grow your CSS skills. Land your dream job.

Controlling when CSS animations/transitions run

  • # February 12, 2013 at 4:52 am

    Hi there,

    I have a couple of questions with some CSS transitions I’ve added to a site I’m working on – and one ‘issue’.

    I’ve uploaded a template here: [www.moymadethis.co.uk/example/5-blog-page.html](http://moymadethis.co.uk/example/5-blog-page.html “”)

    The first set of transitions scale the logo, telephone number and the main navigation down when the browser resizes down from around 980px. The 2nd set of transitions is just the opposite, it scales up if the browser window is small and is then scaled up to 980px+.

    Now hopefully you can see these work – my question is, obviously these animations run when the page loads, or at least they seem too to me, how can I avoid this? Would I be better off using a CSS animation?

    My 2nd question is, if you scale the browser down so the main navigation turns into a green bar at the top of the page. If you do this very slowly the transition stutters? Anyone know why this occurs?

    Thanks in advance and I hope someone can advise! :)

    # February 12, 2013 at 5:46 am

    Everything working fine for me…

    # February 12, 2013 at 6:36 am

    Hmm I could of sworn all the animations ran when the page loaded …maybe not?

    One thing I definitely get though is the green nav bar flickering/stuttering on resize when it becomes fixed at the top of the browser? Thats on a Mac in Chrome, also seems to happen in Safari?

    # February 12, 2013 at 6:59 am

    I’m using Chrome on Mac and I have had none of the issues you suggested. Also tried a couple different versions. Everything is fine. Maybe you just have too many apps / tabs open on your Mac. =p

    # February 12, 2013 at 7:10 am

    I see the fixed green nav bar flickering for a sec or two when resizing. I don’t know why this happens but why worry about it, not like users resize all the time :)

    # February 12, 2013 at 1:54 pm

    Thats strange! Wonder why some can see it and others can’t?! Yeah @CrocoDillon I wasn’t too concerned about it, was just interested if its an issue thats known & can be solved! To be honest I might take the whole fade off, its not necessary – just having a play around with CSS transitions where I can! :)

    I could of sworn the navigation at least moved …I’ve just updated the template to have _3s_ animation on the logo and telephone number and they don’t seem to do anything.

    But if I put _5s_ duration on the nav anchors, it does move at load – doesn’t it?

    Thanks again, hope someone can help …or see the issue now hehe.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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