Controlling when CSS animations/transitions run

[grimski]

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! :)

[rosspenman]

Everything working fine for me…

[grimski]

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?

[CrocoDillon]

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 :)

[grimski]

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.

[Author]

Posts